Dynamic Library Import API

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

Dynamic Library Import API を使用する

Dynamic Library Import API を使用するには、インライン ブートストラップ ローダーのスクリプトタグを HTML ページに追加し、importLibrary() を呼び出すランタイム コードを追加します(この処理はシンプルなスクリプト ローダを使用して行うことができます。この場合、アプリケーション コードは importLibrary を使用する前にコールバックを待機する必要があります)。次のコードをコピーして、アプリケーションに必要なブートストラップ パラメータを追加します。

<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 を読み込み可能となります。