이 페이지는 Cloud Translation API를 통해 번역되었습니다.

지도에 마커 추가하기

플랫폼 선택: Android iOS JavaScript

마커를 사용하여 지도에서 단일 위치를 표시하세요. 이 페이지에서는 프로그래매틱 방식 및 맞춤 HTML 요소를 통해 지도에 마커를 추가하는 방법을 설명합니다.

맞춤 HTML 요소를 사용하여 마커 추가하기
프로그래매틱 방식으로 마커 추가하기

고급 마커 라이브러리 로드하기

지도에 고급 마커를 추가하려면 지도 코드에서 marker 라이브러리를 로드해야 합니다. 이 라이브러리는 AdvancedMarkerElement 및 PinElement 클래스를 제공합니다. 이 라이브러리에 따라 앱에서 프로그래매틱 방식 또는 HTML을 통해 마커를 로드할지가 결정됩니다. 이를 위해서는 우선 앱에서 Maps JavaScript API를 로드해야 합니다.

라이브러리를 로드하는 데 사용하는 방법은 웹페이지에서 Maps JavaScript API를 로드하는 방식에 따라 다릅니다.

웹페이지에서 동적 스크립트 로드를 사용하는 경우 여기 표시된 대로 마커 라이브러리를 추가하고 런타임에 AdvancedMarkerElement(선택적으로 PinElement)를 가져옵니다.
```
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
```
웹페이지에서 직접 스크립트 로드 태그를 사용하는 경우 다음 스니펫에 표시된 대로 로드 스크립트에 libraries=marker를 추가합니다. 이렇게 하면 AdvancedMarkerElement와 PinElement이 모두 가져와집니다.
```
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>
```

지도 ID 설정

고급 마커를 사용하려면 지도 ID가 필요합니다 (DEMO_MAP_ID 사용 가능). 다음과 같이 지도 옵션에서 지도 ID를 설정합니다.

const map = new Map(document.getElementById('map') as HTMLElement, {
    center: { lat: 37.4239163, lng: -122.0947209 },
    zoom: 14,
    mapId: 'DEMO_MAP_ID',
});

지도 ID에 대해 자세히 알아보기

맞춤 HTML 요소를 사용하여 마커 추가하기

맞춤 HTML 요소를 사용하여 고급 마커를 추가하려면 gmp-map 요소에 gmp-advanced-marker 하위 요소를 추가합니다. 다음 스니펫은 웹페이지에 마커를 추가하는 방법을 보여줍니다.

<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

샘플 소스 코드 전체 보기

이 예에서는 HTML을 사용하여 마커가 포함된 지도를 만드는 방법을 보여줍니다.

TypeScript

// This example adds a map with markers, using web components.
async function initMap(): Promise<void> {
    console.log('Maps JavaScript API loaded.');
}
declare global {
    interface Window {
      initMap: () => void;
    }
  }
window.initMap = initMap;index.ts

JavaScript

// This example adds a map with markers, using web components.
async function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = initMap;index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

gmp-map {
  height: 400px;
}
style.css

HTML

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

    <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 script 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&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>index.html

샘플 사용해 보기

JSFiddle.net Google Cloud Shell

프로그래매틱 방식으로 마커 추가하기

프로그래매틱 방식으로 지도에 고급 마커를 추가하려면 다음 예시와 같이 새 AdvancedMarkerElement를 만들어 LatLng 또는 LatLngAltitude 및 참조를 기본 지도에 전달합니다.

  const marker = new AdvancedMarkerElement({
      map,
      position: { lat: 37.4239163, lng: -122.0947209 },
  });

지도에서 마커를 삭제하려면 markerView.map 또는 position을 null로 설정하세요.

샘플 소스 코드 전체 보기

이 예에서는 지도에 마커를 추가하는 방법을 보여줍니다.

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const marker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
}
initMap();index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const map = new Map(document.getElementById('map'), {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });
    const marker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
}
initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Default Advanced Marker</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>index.html

샘플 사용해 보기

JSFiddle.net

다음 단계

기본 마커 맞춤설정

지도에 마커 추가하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

고급 마커 라이브러리 로드하기

지도 ID 설정

맞춤 HTML 요소를 사용하여 마커 추가하기

샘플 소스 코드 전체 보기

TypeScript

JavaScript

CSS

HTML

샘플 사용해 보기

프로그래매틱 방식으로 마커 추가하기

샘플 소스 코드 전체 보기

TypeScript

JavaScript

CSS

HTML

샘플 사용해 보기

다음 단계

지도에 마커 추가하기