[javascript] 지도에서 특정 위치에 정보 창 추가하기

22 Nov 2023

javascript

지도에서 특정 위치에 정보 창을 추가하는 방법에 대해 알아보겠습니다. 이 기능은 자바스크립트와 Google Maps API를 사용하여 구현할 수 있습니다.

정보 창은 특정 위치에 연결된 마커(marker)에 대한 추가 정보를 표시하는 팝업 창입니다. 사용자가 마커를 클릭하면 정보 창이 나타나고, 마커를 클릭하지 않으면 정보 창이 사라집니다.

아래의 코드를 사용하여 지도에 마커와 정보 창을 추가해 보세요.

function initMap() {
  // 지도 생성
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.5665, lng: 126.9780}, // 지도의 중심 좌표
    zoom: 13 // 지도의 확대 정도
  });

  // 마커 생성
  var marker = new google.maps.Marker({
    position: {lat: 37.5665, lng: 126.9780}, // 마커의 위치 좌표
    map: map, // 마커를 표시할 지도 객체
    title: '서울' // 마커에 표시할 제목
  });

  // 정보 창 생성
  var infowindow = new google.maps.InfoWindow({
    content: '<h3>서울</h3><p>대한민국의 수도</p>' // 정보 창에 표시할 내용
  });

  // 마커를 클릭하면 정보 창을 표시
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  // 지도를 클릭하면 정보 창을 닫음
  map.addListener('click', function() {
    infowindow.close();
  });
}

위 코드에서 initMap 함수는 지도를 초기화하고 마커 및 정보 창을 생성하기 위해 사용됩니다. google.maps.Map 생성자를 통해 지도를 생성하고, google.maps.Marker 생성자를 통해 마커를 생성합니다. 마커를 클릭하면 정보 창이 표시되도록 이벤트를 추가하고, 지도를 클릭하면 정보 창이 닫히도록 이벤트를 추가합니다.

이제 HTML 파일에 위의 코드를 추가하고, <div id="map"></div>와 같이 id가 “map”인 요소를 생성하여 지도를 표시할 준비를 마치세요.

자세한 내용은 Google Maps JavaScript API 문서를 참조해 주세요.