[javascript] 지도에 정보 툴팁 추가하기

22 Nov 2023

javascript

지도 애플리케이션은 사용자에게 지리적 정보를 시각적으로 제공하기 위해 널리 사용됩니다. 이러한 애플리케이션에서는 종종 특정 지점에 대한 정보 툴팁을 표시하는 것이 유용합니다. 이번 블로그 포스트에서는 JavaScript를 사용하여 지도에 정보 툴팁을 추가하는 방법을 소개하겠습니다.

1. 지도와 마커 생성하기

지도에서 정보 툴팁을 추가하려면 먼저 지도와 마커를 생성해야 합니다. 가장 일반적으로 사용되는 지도 API 중 하나인 Google Maps API를 사용하여 예제를 작성하겠습니다.

먼저 HTML 파일에 div 요소를 추가하여 지도를 표시할 위치를 지정합니다. 그리고 아래와 같은 JavaScript 코드를 사용하여 API를 로드하고 지도와 마커를 생성합니다.

<div id="map"></div>

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 37.5665, lng: 126.9780 },
      zoom: 12
    });
    
    var marker = new google.maps.Marker({
      position: { lat: 37.5665, lng: 126.9780 },
      map: map,
      title: '서울'
    });
  }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

위 코드에서 YOUR_API_KEY 부분을 실제 Google Maps API 키로 대체해야 합니다.

2. 마커에 정보 툴팁 추가하기

마커에 정보 툴팁을 추가하려면 마커 생성 후 google.maps.InfoWindow 객체를 사용하여 툴팁을 생성하고 연결해야 합니다.

아래 코드를 사용하여 마커와 정보 툴팁을 추가할 수 있습니다.

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 37.5665, lng: 126.9780 },
      zoom: 12
    });
    
    var marker = new google.maps.Marker({
      position: { lat: 37.5665, lng: 126.9780 },
      map: map,
      title: '서울'
    });
    
    var infoWindow = new google.maps.InfoWindow({
      content: '서울은 대한민국의 수도입니다.'
    });
    
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
  }
</script>

위 코드에서 content 속성에 원하는 툴팁 내용을 추가할 수 있습니다.

3. 스타일링

툴팁의 스타일을 변경하고자 할 때는 google.maps.InfoWindow 객체의 setOptions 메서드를 사용하여 CSS 스타일을 설정할 수 있습니다. 예를 들어, 툴팁의 배경색을 변경하고자 할 때 아래 코드를 사용할 수 있습니다.

infoWindow.setOptions({ 
  background-color: '#ff0000',
});

결론

이제 JavaScript를 사용하여 지도에 정보 툴팁을 추가하는 방법을 알아보았습니다. 이를 응용하여 지도 애플리케이션에 유용한 기능을 추가할 수 있습니다. Google Maps API 외에도 다른 지도 API에서도 유사한 기능을 제공하므로 해당 API의 문서를 참조하는 것이 도움이 될 것입니다.

참고 자료:

Google Maps JavaScript API