소개

지도에서 특정 위치의 속성 정보를 표시하는 것은 많은 웹 애플리케이션에서 필요한 기능 중 하나입니다. 이 기능을 구현하기 위해 자바스크립트와 지도 API를 사용할 수 있습니다. 이 글에서는 자바스크립트와 Google Maps API를 사용하여 특정 위치의 속성 정보를 표시하는 방법을 알아보겠습니다.

구현 방법

Google Maps API 키 발급

먼저 Google Maps API 키를 발급받아야 합니다. Google 개발자 콘솔에서 프로젝트를 생성하고, Maps JavaScript API를 활성화한 후, API 키를 발급받으세요.

HTML 파일 작성

다음과 같이 HTML 파일을 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>지도에서 속성 정보 표시하기</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <script>
      function initMap() {
        // 지도 초기화 코드 작성
      }
    </script>
  </body>
</html>

위 코드에서 YOUR_API_KEY 부분에는 발급받은 Google Maps API 키를 넣어주세요.

자바스크립트 코드 작성

initMap 함수 안에 다음과 같이 코드를 작성하면, 특정 위치의 속성 정보를 표시할 수 있습니다.

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 37.5665, lng: 126.9780}, // 특정 위치의 좌표
      zoom: 13, // 지도 확대 수준
    });

    var marker = new google.maps.Marker({
      position: {lat: 37.5665, lng: 126.9780}, // 특정 위치의 좌표
      map: map,
      title: '서울 시청', // 마커 툴팁 제목
    });

    var infowindow = new google.maps.InfoWindow({
      content: '서울 시청 정보를 표시합니다.', // 속성 정보 내용
    });

    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  }

위의 코드에서 lat와 lng 부분에는 특정 위치의 위도와 경도를 넣어주세요. title 부분에는 마커의 툴팁 제목을 지정할 수 있습니다. content 부분에는 속성 정보를 입력해주세요.

결과 확인

HTML 파일을 웹 브라우저에서 열면, 해당 위치의 지도와 마커가 표시되고 마커를 클릭하면 속성 정보가 표시됩니다.

결론

이와 같이 자바스크립트와 Google Maps API를 활용하여 지도에서 특정 위치의 속성 정보를 표시할 수 있습니다. 이를 응용하여 웹 애플리케이션에서 지리적 정보를 시각화하거나 추가 기능을 구현할 수 있습니다.

소개

구현 방법

결론

참고 자료