자바스크립트에서 JSON 데이터를 이용하여 지도 마커 생성하기

15 Sep 2023

javascript

지도를 생성하고 마커를 표시하는 것은 웹 개발에서 흔히 사용되는 작업 중 하나입니다. 이번에는 JSON 데이터를 사용하여 자바스크립트를 통해 지도 위에 마커를 생성하는 방법에 대해 알아보겠습니다.

JSON 데이터 가져오기

먼저, 마커를 생성하기 위해 JSON 데이터를 가져와야 합니다. JSON 데이터는 서버에서 제공되는 형식화된 데이터입니다. 아래는 예시 JSON 데이터입니다.

{
  "markers": [
    {
      "title": "마커 1",
      "lat": 37.5665,
      "lng": 126.9780
    },
    {
      "title": "마커 2",
      "lat": 37.4983,
      "lng": 127.0293
    },
    {
      "title": "마커 3",
      "lat": 37.5667,
      "lng": 126.9784
    }
  ]
}

자바스크립트에서 마커 생성하기

먼저, JSON 데이터를 가져와서 파싱합니다.

const json = '{"markers":[{"title":"마커 1","lat":37.5665,"lng":126.9780},{"title":"마커 2","lat":37.4983,"lng":127.0293},{"title":"마커 3","lat":37.5667,"lng":126.9784}]}';
const data = JSON.parse(json);

그 후, 맵을 생성하고 마커를 추가합니다.

// 맵 생성
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 37.5665, lng: 126.9780 },
  zoom: 12
});

// 데이터를 기반으로 마커 생성
data.markers.forEach(markerData => {
  const marker = new google.maps.Marker({
    position: { lat: markerData.lat, lng: markerData.lng },
    map,
    title: markerData.title
  });
});

마무리

이제 자바스크립트를 사용하여 JSON 데이터로 지도 위에 마커를 생성하는 방법에 대해 알아보았습니다. JSON 데이터를 가져와서 파싱하고, 맵을 생성한 후에 마커를 추가하면 됩니다. 이를 통해 동적으로 지도에 마커를 표시할 수 있습니다.

#JavaScript #JSON #지도마커생성