[javascript] 지도 영역에 이벤트 리스너 추가하기

22 Nov 2023

javascript

이번 포스트에서는 JavaScript를 사용하여 웹 페이지에 지도 영역에 이벤트 리스너를 추가하는 방법에 대해 알아보겠습니다. 이벤트 리스너를 추가하면 사용자의 동작에 반응하여 원하는 기능을 수행할 수 있게 됩니다.

지금부터 이벤트 리스너를 추가하는 과정을 단계별로 알아보겠습니다.

1. 지도 생성하기

먼저, 지도를 생성해야 합니다. 이 예제에서는 Google Maps JavaScript API를 사용하여 지도를 생성하겠습니다. API 키를 발급받고, 해당 스크립트를 페이지에 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</head>
<body>
  <div id="map"></div>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.5665, lng: 126.9780},
        zoom: 8
      });
    }
  </script>
</body>
</html>

2. 이벤트 리스너 추가하기

이제 지도 위에 클릭 이벤트 리스너를 추가하겠습니다. 사용자가 지도 영역을 클릭할 때마다 알림창이 뜨도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</head>
<body>
  <div id="map"></div>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.5665, lng: 126.9780},
        zoom: 8
      });

      google.maps.event.addListener(map, 'click', function(event) {
        alert('지도가 클릭되었습니다! 좌표: ' + event.latLng);
      });
    }
  </script>
</body>
</html>

위의 예제 코드에서 google.maps.event.addListener 함수를 사용하여 지도에 클릭 이벤트 리스너를 추가하였습니다. 클릭이벤트가 발생하면 알림창이 뜨고, 클릭한 위치의 좌표가 출력됩니다.

이제 위의 코드를 실행하면 지도가 생성되고, 지도 영역을 클릭하면 알림창이 뜨는 것을 확인할 수 있습니다.

이렇게 JavaScript를 사용하여 지도 영역에 이벤트 리스너를 추가하는 방법을 알아보았습니다. 해당 기법을 응용하여 사용자의 동작에 따라 원하는 기능을 수행할 수 있습니다.