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

15 Sep 2023

javascript

지도를 생성하고 데이터를 표시하는 것은 웹 개발에서 중요한 요소입니다. 이번 포스트에서는 자바스크립트를 사용하여 JSON 데이터를 이용해 지도를 생성하는 방법을 알아보겠습니다.

JSON 데이터 구조

먼저, 사용할 JSON 데이터의 구조를 알아야 합니다. 예를 들어, 다음과 같은 형태의 JSON 데이터를 사용한다고 가정해봅시다.

[
  {
    "name": "서울시청",
    "latitude": 37.5665,
    "longitude": 126.9780
  },
  {
    "name": "경복궁",
    "latitude": 37.5796,
    "longitude": 126.9743
  },
  {
    "name": "남산타워",
    "latitude": 37.5513,
    "longitude": 126.9880
  }
]

이 데이터는 세 개의 장소에 대한 정보를 담고 있습니다. 각 장소는 이름, 위도, 경도 속성으로 구성되어 있습니다.

HTML과 자바스크립트 코드

이제 HTML과 자바스크립트를 사용하여 JSON 데이터를 이용하여 지도를 생성해보겠습니다. 다음은 필요한 HTML과 자바스크립트 코드의 예입니다.

<!DOCTYPE html>
<html>
<head>
  <title>지도 생성 예제</title>
  <style>
    #map {
      width: 100%;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    // JSON 데이터
    var data = [
      {
        "name": "서울시청",
        "latitude": 37.5665,
        "longitude": 126.9780
      },
      {
        "name": "경복궁",
        "latitude": 37.5796,
        "longitude": 126.9743
      },
      {
        "name": "남산타워",
        "latitude": 37.5513,
        "longitude": 126.9880
      }
    ];

    // 지도 생성 함수
    function createMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: data[0].latitude, lng: data[0].longitude },
        zoom: 12
      });

      // 데이터를 반복하여 마커 생성
      data.forEach(function (place) {
        var marker = new google.maps.Marker({
          position: { lat: place.latitude, lng: place.longitude },
          map: map,
          title: place.name
        });
      });
    }

    // Google Maps API 로드
    function initialize() {
      google.maps.event.addDomListener(window, 'load', createMap);
    }

    // 초기화 함수 호출
    initialize();
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
</body>
</html>

위의 코드에서 YOUR_API_KEY를 자신의 Google Maps API 키로 대체해야합니다.

실행 결과

위의 코드를 실행하면 JSON 데이터에 있는 장소들이 지도에 마커로 표시됩니다. 처음 로드될 때, 지도는 JSON 데이터의 첫 번째 장소에 중심을 맞추고 줌 레벨을 12로 설정합니다. 마커를 클릭하면 해당 장소의 이름이 표시됩니다.

위 예제는 Google Maps API를 사용하였지만, 다른 지도 API를 사용하여 동일한 방법으로 지도 생성을 할 수도 있습니다.

이처럼 JSON 데이터를 이용하여 자바스크립트로 지도를 생성할 수 있습니다. 정보를 동적으로 업데이트하려면 JSON 데이터를 서버에서 가져오거나 사용자 입력을 통해 업데이트할 수 있습니다. 자바스크립트에서 JSON 데이터를 이용한 지도 생성은 구현하기도 간단하고 가독성도 좋으며, 유지보수에도 용이합니다.

#javascript #json #지도생성