[javascript] Mapbox지도에 다중 마커 표시하기

22 Nov 2023

javascript

이번에는 Mapbox를 사용하여 지도에 다중 마커를 표시하는 방법에 대해 알아보겠습니다.

먼저, Mapbox 계정을 만들고 해당 페이지에서 접근 토큰을 생성해야합니다. 접근 토큰은 Mapbox API를 사용하기 위해 필요합니다.

다음으로, HTML 파일을 생성하고 Mapbox JS 라이브러리를 로드합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mapbox</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
<div id="map"></div>
<script>
  mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [longitude, latitude], // 지도의 중심 좌표
    zoom: 12 // 지도의 확대/축소 레벨
  });

  var markers = [
    {coords: [longitude1, latitude1], title: '마커1'},
    {coords: [longitude2, latitude2], title: '마커2'},
    {coords: [longitude3, latitude3], title: '마커3'}
  ];

  markers.forEach(function(marker) {
    var el = document.createElement('div');
    el.className = 'marker';
    el.textContent = marker.title;

    new mapboxgl.Marker(el)
      .setLngLat(marker.coords)
      .addTo(map);
  });
</script>
</body>
</html>

위 코드에서 YOUR_ACCESS_TOKEN의 위치에 앞서 생성한 접근 토큰을 입력해야 합니다. 또한, longitude1, latitude1 등의 변수에 각 마커의 경도와 위도 값을 입력해야 합니다.

위 코드를 실행하면 Mapbox지도에 각 마커가 표시됩니다. 마커를 클릭하면 해당 마커의 정보가 표시됩니다.

이렇게 Mapbox를 사용하여 다중 마커를 표시할 수 있습니다.

보다 자세한 내용은 Mapbox API 문서를 참조하세요.