자바스크립트에서 'this' 키워드를 사용한 지도 위에 마커 표시 방법

18 Sep 2023

javascript

마커는 지도 위에 지정된 위치에 특정한 아이콘 또는 표식으로 표시하는 것을 말합니다. 이러한 마커를 자바스크립트를 사용하여 지도 위에 표시하는 방법을 알아보겠습니다.

구글 맵 API 사용하기

구글 맵 API는 자바스크립트를 사용하여 맵과 관련된 다양한 기능을 구현할 수 있도록 도와주는 도구입니다. 구글 맵 API를 사용하기 위해 먼저 API 키를 발급받아야 합니다. API 키는 https://developers.google.com/maps/documentation/javascript/get-api-key 에서 발급할 수 있습니다.

HTML 코드

먼저 HTML 파일에 구글 맵을 표시할 요소를 추가합니다.

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

자바스크립트 코드

다음으로 자바스크립트 코드로 지도를 표시하고 마커를 추가합니다.

function initMap() {
  // 지도를 표시할 위치 정의
  var myLatLng = {lat: 37.5, lng: 127};

  // 지도 객체 생성
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: myLatLng
  });

  // 마커 객체 생성
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

‘this’ 키워드 사용하기

만약 ‘this’ 키워드를 사용하여 마커를 클릭했을 때 특정 동작을 수행하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

function initMap() {
  var myLatLng = {lat: 37.5, lng: 127};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });

  marker.addListener('click', function() {
    // 'this' 키워드를 사용하여 마커를 클릭했을 때 동작을 수행
    console.log('마커를 클릭했습니다!');
  });
}

위 예제에서는 마커를 클릭했을 때 콘솔에 메시지를 출력하도록 설정하였습니다. 여기서 ‘this’ 키워드는 클릭 이벤트가 발생한 마커 객체를 의미합니다.

이제 위의 자바스크립트 코드를 HTML 파일에 추가하고 구글 맵 API 키를 설정하여 실행하면 지도 위에 마커가 표시되고 마커를 클릭했을 때 동작이 실행됩니다.

#javascript #구글맵 #마커