[javascript] 지도에서 특정 위치에 레이어 추가하기

22 Nov 2023

javascript

이번에는 JavaScript를 사용해서 지도에서 특정 위치에 레이어를 추가하는 방법에 대해 알아보겠습니다.

필요한 라이브러리

지도를 사용하기 위해 먼저 해당 기능을 제공하는 라이브러리를 설치해야 합니다. 이번 예제에서는 Google Maps API를 사용할 예정입니다.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

지도 생성하기

먼저, 지도를 생성해야 합니다. 다음 코드는 map이라는 id를 가진 div 요소에 Google Maps를 생성하는 코드입니다.

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

레이어 추가하기

특정 위치에 레이어를 추가하기 위해서는 google.maps.Marker 객체를 사용하면 됩니다. 다음은 특정 위치에 마커 레이어를 추가하는 코드입니다.

function addMarker(lat, lng) {
  var marker = new google.maps.Marker({
    position: {lat: lat, lng: lng},
    map: map,
    title: 'Marker'
  });
}

위의 코드에서 lat과 lng은 위도와 경도 값을 의미합니다. 이를 적절한 위치 값으로 변경하여 사용하면 됩니다.

실행하기

위에서 작성한 코드를 실행하려면 initMap 함수를 호출해야 합니다. 이를 위해 아래와 같이 HTML 파일에 다음 코드를 추가합니다.

<body onload="initMap()">
  <div id="map" style="width: 100%; height: 400px;"></div>
</body>

위 코드에서 style 속성을 통해 지도의 크기를 지정할 수 있습니다. 필요에 따라 값을 변경해주세요.

결론

이제 JavaScript와 Google Maps API를 사용하여 지도에서 특정 위치에 레이어를 추가하는 방법을 알아보았습니다. 위의 예제를 참고하여 원하는 위치에 마커를 추가해 보세요. API 문서와 다양한 예제를 참고하여 지도에 다른 유형의 레이어를 추가할 수도 있습니다.