Dynamic Library Import API

Dynamic Library Import API は、Maps JavaScript API とそれに付随するすべてのライブラリを読み込む新しい方法です。ランタイムにライブラリを動的に読み込むことができるため、コンポーネントをまたいだ依存関係を考慮する必要がなくなり、ライブラリの Promise ベース読み込みが可能です。また、Maps JavaScript API を使う際に、長い名前空間の使用を避けることができます（長い名前空間が供給されなくなるわけではなく、必要に応じて使用可能です）。

Dynamic Library Import API を使用する

Dynamic Library Import API を使用するには、インラインブートストラップローダー用の script タグを HTML ページに追加し、ランタイムコードで importLibrary() を呼び出すようにします（この処理は単純なスクリプトローダーで行うことも可能です。その場合、アプリケーションコードによる importLibrary の使用はコールバック完了まで待機する必要があります）。次のコードをコピーして使用しましょう。YOUR_API_KEY_HERE とある箇所は実際の 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: Maps JS をご利用の場合、Cloud コンソールで HTTP リファラー制限を設定し、特定の API キーの使用を許可する URL を制限できます。デフォルトでは、特定のパスのみに API キーの使用を許可するように、これらの制限が構成されています。同じドメインまたはオリジンのすべての URL で該当 API キーを使用しても問題ない場合は、authReferrerPolicy: "origin" を設定することで、Maps JavaScript API からのリクエストを承認する際に送信されるデータの量を制限できます。このパラメータが指定されており、Cloud コンソールで HTTP リファラー制限が有効になっている場合、現在のウェブサイトのドメインに一致する HTTP リファラー制限（パス指定なし）が存在する場合に限り、Maps JavaScript API を読み込み可能となります。