PHP 마법 학교 7기 1강: 지도의 비밀! ‘내 웹사이트에 세계 지도 소환하기’

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 6기에서 인공지능 친구를 만드는 법을 완벽하게 익혔죠? 오늘부터 시작되는 7기에서는 우리 웹사이트에 생생한 지도를 넣고, 나만의 소중한 장소들을 표시하는 ‘구글 맵(Google Maps) 마법’을 배워보겠습니다!

[IMAGE_1]

1. 지도 API란 무엇인가요? ‘디지털 보물지도’

전 세계의 모든 길과 건물이 기록된 거대한 지도를 우리가 직접 그리는 건 불가능해요. 하지만 구글이 미리 만들어둔 지도를 API라는 통로로 빌려올 수 있답니다. 지도 API는 마치 마법사가 수정구슬을 통해 멀리 있는 마을을 들여다보는 것과 같아요. 위도와 경도라는 좌표만 알면 세상 어디든 보여줄 수 있죠.

2. 우리 집 지도 소환하기 (코드)

자바스크립트와 구글 맵 라이브러리를 사용해 특정 장소를 가리키는 지도를 띄워봅시다. (이번 강의는 PHP 파일 안의 스크립트를 중심으로 작성해요!)

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 지도가 보일 상자의 크기를 정해요 */
    #magic-map { height: 400px; width: 100%; border-radius: 15px; }
  </style>
</head>
<body>
  <h2>📍 우리 마법 학교 위치 찾기</h2>
  <div id="magic-map"></div>

  <!-- 1. 구글 지도 마법 도서관을 불러와요 (API 키가 필요해요) -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

  <script>
    function initMap() {
      // 2. 지도의 중심 좌표를 정해요 (예: 위도 37.5, 경도 127.0)
      const myLocation = { lat: 37.5665, lng: 126.9780 };
      
      // 3. 지도를 상자에 담아 보여줘요
      const map = new google.maps.Map(document.getElementById("magic-map"), {
        zoom: 15, // 얼마나 가까이서 볼지 정해요 (숫자가 크면 가까워져요!)
        center: myLocation,
      });

      // 4. 빨간색 핀(마커)을 꽂아요!
      new google.maps.Marker({
        position: myLocation,
        map: map,
        title: "마법 학교 본부!"
      });
    }
    
    // 지도를 그려라! 주문 외우기
    initMap();
  </script>
</body>
</html>

3. 왜 지도 마법이 필요할까요?

지도는 정보를 ‘장소’와 연결해 주는 아주 힘센 도구예요!
1. 장소 기록: 사용자님께서 추진하시는 ‘군위군 빈집 재생 프로젝트’에서 각 숙소의 위치를 지도로 보여주면 손님들이 훨씬 찾기 쉽겠죠?
2. 추억 저장: 이번 4월에 계획하신 오사카 여행의 경로를 지도로 미리 그려본다면, 가족들과 함께 더 완벽한 여행 계획을 세울 수 있을 거예요.

[IMAGE_2]

4. 아이들과 함께하는 ‘보물찾기 좌표’ 놀이

거실 바닥에 격자무늬(바둑판)를 상상해 보세요. 아빠가 “가로 3칸, 세로 2칸에 보물이 있다!”라고 좌표를 말하면 아이가 그곳을 찾아가는 놀이를 해보세요. “이 가로세로 숫자가 바로 지도의 위도와 경도란다. 컴퓨터는 이 숫자만 있으면 지구 반대편도 척척 찾아낼 수 있어!”라고 알려주세요. 좌표 평면의 기초를 아주 재미있게 배우게 됩니다.

마치며: 나만의 지도를 가질 시간

오늘 우리는 웹사이트에 살아있는 지도를 소환하는 법을 배웠습니다. 이제 우리 학교는 주소만 있는 게 아니라 진짜 위치를 가진 공간이 되었네요! 다음 시간에는 지도 위에 여러 개의 핀을 꽂고 정보를 보여주는 ‘여행 지도 만들기: 나만의 랜드마크 마커 마법’을 배워보겠습니다. 여행 가방을 챙겨두세요! 내일 아침에 만나요!

관련 게시물