자바스크립트에서 JSON 데이터를 이용하여 인터랙티브 맵 생성하기

15 Sep 2023

javascript

개요

이번 포스트에서는 자바스크립트와 JSON 데이터를 활용하여 인터랙티브한 맵을 생성하는 방법을 알아보겠습니다.

필요한 기술

자바스크립트
HTML
JSON 데이터

단계별 진행

HTML 파일 생성하기
- 웹 페이지를 생성하기 위해 HTML 파일을 만들어 줍니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>인터랙티브 맵</title>
  <style>
    /* 스타일링 코드 작성 */
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="script.js"></script>
</body>
</html>

스타일링 코드 작성하기
- CSS를 활용하여 맵의 스타일을 정의해 줍니다.

#map {
  width: 800px;
  height: 600px;
}

JSON 데이터 파일 생성하기
- 맵에 표시될 데이터를 JSON 형식으로 작성해 줍니다. 예를 들어, 각 도시의 이름과 좌표 정보를 포함할 수 있습니다.

[
  {
    "name": "서울",
    "lat": 37.5665,
    "lng": 126.9780
  },
  {
    "name": "부산",
    "lat": 35.1796,
    "lng": 129.0756
  },
  {
    "name": "대구",
    "lat": 35.8714,
    "lng": 128.6014
  }
]

자바스크립트 파일 작성하기
- JSON 데이터를 불러와서 맵을 생성하는 자바스크립트 코드를 작성해 줍니다.

window.onload = function() {
  var mapElement = document.getElementById('map');

  // JSON 데이터 가져오기
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // 맵 생성
      var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(data[0].lat, data[0].lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(mapElement, mapOptions);

      // 도시 마커 생성
      data.forEach(city => {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(city.lat, city.lng),
          map: map,
          title: city.name
        });
      });
    })
    .catch(error => console.error('Error:', error));
};

결과 확인하기
- 웹 브라우저에서 HTML 파일을 열어 맵이 제대로 생성되는지 확인해 보세요.

마무리

이제 자바스크립트와 JSON 데이터를 활용하여 인터랙티브한 맵을 생성하는 방법을 알아보았습니다. 웹 페이지에 JSON 데이터를 로드하고, 해당 데이터를 활용하여 구글 맵에 마커를 생성하는 방법을 익혀보세요. 다양한 데이터를 활용하여 맵을 구성하고, 사용자와 상호작용할 수 있는 기능을 추가해보세요.

#javascript #JSON #맵 #인터랙티브