안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 지도 위에 여러 개의 핀을 꽂는 ‘랜드마크 마커 마법’을 배워보았죠? 하지만 핀만 꽂혀 있으면 그곳이 정확히 어떤 곳인지 알기 어려워요. 오늘은 핀을 클릭했을 때 멋진 설명과 사진이 짠! 하고 나타나는 ‘정보 창(InfoWindow) 마법’을 배워보겠습니다.
1. 정보 창(InfoWindow)이란 무엇인가요? ‘장소의 속삭임’
구글 맵에서 맛집을 클릭하면 가게 이름과 별점이 나오는 작은 말풍선을 본 적 있나요? 코딩에서는 이것을 InfoWindow라고 불러요. 평소에는 숨어 있다가 우리가 핀을 누르는 순간(클릭 이벤트), 그 장소의 비밀 이야기를 들려주는 마법의 쪽지 같은 존재랍니다.
2. 클릭하면 나타나는 말풍선 만들기 (코드)
마커를 클릭했을 때 미리 준비한 HTML 내용을 보여주는 코드를 작성해 봅시다. 오사카 여행지 설명이 나오도록 꾸며봤어요!
<!DOCTYPE html>
<html>
<head>
<style>
#info-map { height: 500px; width: 100%; border-radius: 15px; }
.info-content { font-family: 'Nanum Gothic', sans-serif; padding: 5px; }
</style>
</head>
<body>
<h2>🗣️ 말을 거는 마법 지도</h2>
<div id="info-map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
const centerPos = { lat: 34.6873, lng: 135.5262 };
const map = new google.maps.Map(document.getElementById("info-map"), {
zoom: 13,
center: centerPos,
});
// 1. 정보 창에 들어갈 내용을 마법 주문(HTML)으로 만들어요
const contentString =
'<div class="info-content">' +
'<h3>🏯 오사카성</h3>' +
'<p>일본의 역사가 담긴 아름다운 성이에요! 밤에 보면 더 멋지답니다.</p>' +
'</div>';
// 2. 정보 창 객체를 생성해요
const infowindow = new google.maps.InfoWindow({
content: contentString,
});
// 3. 마커를 만들어요
const marker = new google.maps.Marker({
position: centerPos,
map: map,
title: "오사카성"
});
// 4. 클릭 이벤트 마법! (마커를 누르면 정보 창을 열어라)
marker.addListener("click", () => {
infowindow.open({
anchor: marker,
map,
});
});
}
initMap();
</script>
</body>
</html>3. 왜 정보 창이 중요할까요?
단순한 위치보다 그 장소가 가진 ‘이야기’가 더 중요할 때가 많아요!
1. 자세한 안내: 사용자님이 준비 중인 ‘군위군 빈집 재생 프로젝트’에서 각 집의 내부 사진이나 하룻밤 가격을 정보 창에 넣어두면 손님들이 예약하기 훨씬 편해지겠죠?
2. 맞춤형 정보: 4월 오사카 여행 때, 복잡한 지하철역 출구 번호나 꼭 먹어야 할 메뉴를 미리 정보 창에 적어두면 길 위에서 당황하지 않을 수 있어요.
4. 아이들과 함께하는 ‘비밀 편지 숨기기’ 놀이
집안 곳곳에 작은 포스트잇을 붙여보세요. 겉면에는 숫자만 적고, 포스트잇을 들춰봐야만 “여기는 맛있는 간식이 숨겨진 곳이야!” 같은 메시지가 보이게 하는 거예요. “이렇게 숨어있다가 우리가 행동(클릭)했을 때 나타나는 정보가 바로 InfoWindow란다!”라고 알려주세요. 이벤트 기반 프로그래밍(Event-driven)의 원리를 아주 쉽게 배우게 됩니다.
마치며: 살아있는 지도의 완성
오늘 우리는 지도가 우리에게 말을 걸게 하는 상호작용 마법을 배웠습니다. 이제 우리 웹사이트의 지도는 단순한 그림이 아니라 훌륭한 가이드북이 되었네요! 다음 시간에는 지도 위에 선을 그어 이동 경로를 보여주는 ‘길 찾기 마법: 폴리라인(Polyline)으로 여행 코스 그리기’를 배워보겠습니다. 여행 지도가 한층 더 멋져질 거예요! 내일 아침에 만나요!
