HTML을 사용하여 마커가 포함된 Google 지도 추가

소개

이 튜토리얼에서는 HTML을 사용하여 마커가 포함된 Google 지도를 웹페이지에 추가하는 방법을 보여줍니다. 이 튜토리얼을 사용하여 다음과 같은 지도를 만듭니다. 두 개의 마커 중 하나는 캘리포니아주 마운틴 뷰에, 다른 하나는 워싱턴주 시애틀에 위치합니다.

시작하기

HTML을 사용하여 마커가 포함된 Google 지도를 만들기 위한 단계는 다음과 같습니다.

  1. API 키 가져오기
  2. HTML, CSS, JS 생성하기
  3. 지도 추가하기
  4. 마커 추가하기

웹브라우저가 필요합니다. 지원되는 브라우저 목록에서 플랫폼에 따라 Chrome(권장), Firefox, Safari, Edge와 같이 잘 알려진 브라우저를 선택하세요.

1단계: API 키 가져오기

이 섹션에서는 자체 API 키를 사용하여 Maps JavaScript API에 앱을 인증하는 방법을 설명합니다.

다음 단계에 따라 API 키를 가져옵니다.

  1. Google Cloud 콘솔로 이동합니다.

  2. 프로젝트를 만들거나 선택합니다.

  3. 계속을 클릭하여 API와 모든 관련 서비스를 사용 설정합니다.

  4. 사용자 인증 정보 페이지에서 API 키를 가져오고 API 키 제한사항을 설정합니다. 기존에 무제한 API 키가 있거나 브라우저 제한이 있는 키가 있으면 그 키를 사용할 수도 있습니다.

  5. 할당량 도난을 방지하고 API 키를 보호하려면 API 키 사용을 참고하세요.

  6. 결제를 사용 설정합니다. 자세한 내용은 사용량 및 결제를 참고하세요.

  7. API 키를 받으면 'YOUR_API_KEY'를 클릭하여 다음 스니펫에 추가합니다. 자체 웹페이지에서 사용할 부트스트랩 스크립트 태그를 복사하여 붙여넣습니다.

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>

2단계: HTML, CSS, JS 생성하기

다음은 기본 HTML 웹페이지를 만들기 위한 코드입니다.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

지도를 로드하려면 다음 스니펫에에 표시된 대로 Maps JavaScript AP용 부트스트랩 로더가 포함된 script 태그를 추가해야 합니다(자체 API 키 추가).

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap&libraries=map,marker">

스포일러 경고: JSFiddle에 대한 완성된 예시를 사용해 보세요.

3단계: 지도 추가하기

페이지에 Google 지도를 추가하려면 gmp-map HTML 요소를 복사한 후HTML 페이지의 body 내에 붙여넣습니다.

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

이렇게 하면 다음 지도가 만들어집니다.

방금 만든 지도가 산호세 대도시 지역의 중심에 표시됩니다.

4단계: 마커 추가하기

지도에 마커를 추가하려면 gmp-advanced-marker HTML 요소를 사용합니다. 다음 스니펫을 복사한 후 이전 단계에서 추가한 gmp-map 코드 전체에 붙여넣습니다.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

이전의 코드는 두 개의 마커를 추가하고 gmp-map에서 zoom 및 center 파라미터를 변경하여 이러한 마커를 더 잘 표시합니다. 고급 마커를 사용하려면 지도 ID가 필요합니다(DEMO_MAP_ID 사용 가능).

도움말 및 문제 해결

  • 맞춤 스타일 지정을 사용하여 지도를 맞춤설정할 수 있습니다.
  • 웹브라우저에서 개발자 도구 콘솔을 사용하여 코드를 테스트 및 실행하고 오류 보고서를 읽고 코드 관련 문제를 해결합니다.
  • 다음 단축키를 사용하여 Chrome에서 콘솔을 엽니다.
    Command+Option+J(Mac) 또는 Control+Shift+J(Windows)

  • 아래 단계에 따라 Google 지도에서 위치의 위도 및 경도 좌표를 가져옵니다.

    1. 브라우저에서 Google 지도를 엽니다.
    2. 지도에서 좌표가 필요한 정확한 위치를 마우스 오른쪽 버튼으로 클릭합니다.
    3. 표시되는 컨텍스트 메뉴에서 이곳이 궁금한가요?를 선택합니다. 지도의 하단에 카드가 표시됩니다. 카드의 마지막 행에서 위도 및 경도 좌표를 찾습니다.

  • 지오코딩 서비스를 사용하여 주소를 위도 및 경도 좌표로 변환할 수 있습니다. 개발자 가이드에서는 지오코딩 서비스 시작하기에 관한 자세한 정보를 제공합니다.

전체 예시 코드

최종 지도와 이 튜토리얼에 사용된 전체 예시 코드는 다음과 같습니다.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html