Colin's Blog
자바스크립트로 웹사이트에서 Google Maps API 사용하기

많은 웹사이트에서 지도 기능을 제공하기 위해 Google Maps API를 사용합니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 웹사이트에서 Google Maps API를 통해 지도를 표시하는 방법을 알아보겠습니다.

Google Maps API 키 가져오기

먼저, Google Cloud Console에서 Google Maps API를 사용하기 위한 API 키를 가져와야 합니다. 다음 단계를 따라 진행해보세요.

  1. Google Cloud Console에 로그인하세요.
  2. 프로젝트를 선택하거나 새 프로젝트를 생성하세요.
  3. “API 및 서비스” 탭으로 이동하세요.
  4. “API 및 서비스 사용 설정”을 클릭하세요.
  5. “Google Maps JavaScript API”를 검색하고 활성화하세요.
  6. “사용자 인증 정보”로 이동한 후 “API 키 만들기”를 클릭하세요.
  7. API 키를 생성하고 복사하세요.

자바스크립트 코드 작성하기

이제 API 키를 사용하여 자바스크립트 코드를 작성합니다. 먼저 HTML 파일에 Google Maps JavaScript API를 로드하는 스크립트 태그를 추가합니다.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

위 코드에서 YOUR_API_KEY 부분을 이전에 얻은 API 키로 대체해야 합니다.

다음으로, 웹페이지의 특정 요소에 지도를 표시하기 위해 자바스크립트 코드를 작성합니다. 예를 들어, map이라는 id를 가진 div 요소에 지도를 표시하고 싶다면 다음과 같은 코드를 사용할 수 있습니다.

function initMap() {
  var myLatLng = {lat: 37.5665, lng: 126.9780};

  var map = new google.maps.Map(document.getElementById("map"), {
    center: myLatLng,
    zoom: 13
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: "서울"
  });
}

위 코드에서 initMap 함수는 지도를 초기화하고 map 변수에 지도 개체를 할당합니다. 그리고 marker 변수를 통해 특정 위치에 마커를 표시할 수 있습니다.

이제 웹사이트에 이 코드를 추가하고, JavaScript를 로드하고 실행하는 스크립트 태그를 추가합니다.

<script>
  function initMap() {
    // 코드 작성
  }
</script>

웹사이트에 지도 추가하기

마지막으로, 웹페이지에서 지도를 표시하는데 사용할 요소를 만들어야 합니다. 예를 들어, <div id="map"></div>와 같은 코드를 사용하여 지도를 표시할 div 요소를 만들 수 있습니다.

이제 웹페이지를 브라우저에서 열고 지도가 정상적으로 표시되는지 확인할 수 있습니다.

이상으로 자바스크립트로 웹사이트에서 Google Maps API를 사용하는 방법에 대해 알아보았습니다. 이제 여러분은 자신의 웹사이트에 Google Maps를 통해 위치 정보를 표시할 수 있을 것입니다!

#googlemaps #javascript

© 2018 Colin. All rights reserved.