Dynamic Library Import API

Dynamic Library Import API는 Maps JavaScript API 및 API와 함께 제공되는 모든 라이브러리를 로드하는 새로운 방법입니다. 런타임 시 라이브러리를 동적으로 로드할 수 있으므로 구성요소 간 종속 항목에 관해 신경 쓸 필요가 없으며 라이브러리의 약속 기반 로드가 가능합니다. 또한 Maps JavaScript API를 사용할 때 긴 네임스페이스를 사용하지 않아도 됩니다(그러나 긴 네임스페이스는 계속해서 채워지므로 지속적으로 사용할 수 있습니다).

Dynamic Library Import 사용하기

Dynamic Library Import API를 사용하려면 인라인 부트스트랩 로더의 스크립트 태그를 HTML 페이지에 추가하고 런타임 코드를 추가하여 importLibrary()를 호출하세요(또는 간단한 스크립트 로더를 사용하여 이 작업을 수행할 수도 있습니다. 이 경우 애플리케이션 코드는 importLibrary를 사용하기 전에 콜백을 기다려야 합니다). 다음 코드를 복사하여 내 API 키와 애플리케이션에 필요한 부트스트랩 매개변수를 추가합니다.

<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_HERE",
  v: "beta",
  // Add other bootstrap parameters as needed, using camel case.
});
</script>

런타임 시 라이브러리를 로드하려면 다음과 같이 await 연산자를 사용하여 비동기 함수 내에서 importLibrary()를 호출합니다.

let map;

async function initMap() {
    // Create the map.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"),{
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: 'DEMO_MAP_ID',
    });

    // Add an info window.
    const infoWindow = new InfoWindow({
        ariaLabel: "Googleplex",
    });

    // Add a marker.
    const {AdvancedMarkerView} = await google.maps.importLibrary("marker");
    const markerView = new AdvancedMarkerView({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: 'Googleplex, Mountain View CA'
    });

    markerView.addListener('click', () => {
        infoWindow.close();
        infoWindow.setContent('<b>Googleplex</b>, Mountain View CA');
        infoWindow.open(markerView.map, markerView);
    });
}

initMap();

필수 매개변수

  • key: 나의 API 키. 유효한 API 키가 지정되지 않는 한 Maps JavaScript API가 로드되지 않습니다.

  • v: "beta" 미리보기의 경우 베타 채널을 지정해야 합니다.

선택적 매개변수

  • libraries: 로드할 추가 Maps JavaScript API 라이브러리를 나열한 쉼표로 구분된 목록. 고정된 라이브러리 집합을 지정하는 것은 일반적으로 권장되지 않지만 웹사이트의 캐싱 동작을 세부적으로 조정하려는 개발자는 해당 집합을 지정할 수 있습니다. 그러나 지정되지 않은 라이브러리가 필요한 경우 이로 인해 로드 속도가 느려질 수 있습니다.

  • language: 사용할 언어. 이 매개변수는 컨트롤의 이름, 저작권 고지, 운전 경로, 컨트롤 라벨, 서비스 요청에 대한 응답에 영향을 미칩니다. 지원 언어 목록을 참고하세요.

  • region: 사용할 지역 코드. 이 매개변수는 지정된 국가 또는 지역을 기반으로 지도의 동작을 변경합니다.

  • solutionChannel: Google Maps Platform에서는 빠른 구현을 위해 다양한 종류의 샘플 코드를 제공합니다. 더 복잡한 코드 샘플의 채택을 추적하고 솔루션 품질을 개선하기 위해 Google은 샘플 코드의 API 호출에 solution_channel 쿼리 매개변수를 포함합니다.

  • authReferrerPolicy: 지도 JS 고객은 Cloud 콘솔에서 HTTP 리퍼러 제한사항을 구성하여 특정 API 키를 사용할 수 있는 URL을 제한할 수 있습니다. 기본적으로 이러한 제한사항은 특정 경로만 API 키를 사용하도록 구성할 수 있습니다. 동일한 도메인 또는 출처의 URL에서 API 키를 사용할 수 있는 경우 Maps JavaScript API에서 요청을 승인할 때 전송되는 데이터의 양을 제한하도록 authReferrerPolicy: "origin"을 설정할 수 있습니다. 이 매개변수가 지정되고 Cloud 콘솔에서 HTTP 리퍼러 제한사항이 사용 설정된 경우 지정된 경로가 없이 현재 웹사이트의 도메인과 일치하는 HTTP 리퍼러 제한사항이 있을 때만 Maps JavaScript API를 로드할 수 있습니다.