라이브러리

Maps JavaScript API용 JavaScript 코드를 로드하려면 페이지에 다음 형태의 부트스트랩 로더 스크립트를 포함합니다.

<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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Maps JavaScript API는 특별히 요청하기 전에는 로드되지 않는 라이브러리로 구성됩니다. 구성요소를 라이브러리로 분할하면 API가 빠르게 로드 및 파싱될 수 있으므로 필요한 경우에만 라이브러리 로드 및 파싱 오버헤드가 추가로 발생합니다. 동적 라이브러리 가져오기를 사용하는 경우 인라인 부트스트랩 로더는 기본적으로 라이브러리를 로드하지 않습니다 (core 또는 maps도 로드하지 않음). google.maps.importLibrary()를 호출하기 전에는 Maps JavaScript API의 어떤 부분도 로드되지 않습니다.

런타임에 라이브러리를 로드하려면 await 연산자를 사용하여 google.maps.importLibrary() async 함수 내에서 호출합니다. 요청된 라이브러리만 로드된다고 가정하고 코드에서 사용하는 각 라이브러리에 대해 google.maps.importLibrary() 를 호출합니다. 예를 들면 다음과 같습니다.

const { Map } = await google.maps.importLibrary("maps");

다음 코드 예에서는 maps 및 marker 라이브러리를 모두 로드하여 Map 및 AdvancedMarkerElement 클래스에 액세스하는 방법을 보여줍니다.

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

사용 가능한 라이브러리

다음 라이브러리를 동적 라이브러리 가져오기 및 직접 스크립트 로드 태그와 함께 사용할 수 있습니다.

다음 부트스트랩 요청은 Maps JavaScript API의 google.maps.geometry 라이브러리 요청을 직접 스크립트 로드 태그에 추가하는 방법을 보여줍니다.

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

여러 라이브러리를 요청하려면 다음과 같이 쉼표로 구분하세요.

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