지도에 마커 추가하기

플랫폼 선택: Android iOS JavaScript

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

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

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

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

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

웹페이지에서 동적 스크립트 로드를 사용하는 경우 여기 표시된 대로 마커 라이브러리를 추가하고 런타임에 AdvancedMarkerElement(선택적으로 PinElement)를 가져옵니다.
```
const { AdvancedMarkerElement, PinElement } = 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',
});

웹 구성요소를 사용하는 경우 gmp-map 요소에서 직접 지도 ID를 설정할 수 있습니다.

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

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

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

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

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>index.html

샘플 소스 코드 전체 보기

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

TypeScript

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

자바스크립트

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

CSS

/* Note: This CSS file is intentionally blank. */style.css

HTML

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            defer></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>index.html

샘플 사용해 보기

JSFiddle.net

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

프로그래매틱 방식으로 지도에 고급 마커를 추가하려면 다음 예와 같이 새 AdvancedMarkerElement를 만들어 지도에 추가합니다.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

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 marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}index.ts

자바스크립트

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}index.js

요소 추가는 웹 구성요소를 사용하는 경우에만 가능합니다. div 요소를 사용하여 지도를 로드하는 경우 다음과 같이 map 속성을 사용하여 마커를 지도 인스턴스와 연결합니다.

myMap = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
});

const marker = new AdvancedMarkerElement({
    map: myMap,
    position: { lat: -34.397, lng: 150.644 },
});

마커 제거

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

// Set the map to null.
marker.map = null;

// Set the position to null.
marker.position = null;

샘플 소스 코드 전체 보기

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

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

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 marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();index.ts

자바스크립트

const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const marker = new AdvancedMarkerElement({
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
    mapElement.append(marker);
}
initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-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>
        <!-- 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>
    </head>
    <body>
        <gmp-map
            center="37.4239163,-122.0947209"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>index.html

샘플 사용해 보기

JSFiddle.net

다음 단계

기본 마커 맞춤설정

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

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

지도 ID 설정

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

샘플 소스 코드 전체 보기

TypeScript

자바스크립트

CSS

HTML

샘플 사용해 보기

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

TypeScript

자바스크립트

마커 제거

샘플 소스 코드 전체 보기

TypeScript

자바스크립트

CSS

HTML

샘플 사용해 보기

다음 단계

지도에 마커 추가하기