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_HERE", // Add other bootstrap parameters as needed, using camel case. // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.) }); </script>
Maps JavaScript API を構成するライブラリは、明示的にリクエストするまで読み込まれません。コンポーネントをライブラリに分割することで、API の読み込み(と解析)が迅速に行われます。必要なライブラリだけを読み込んで解析することで、オーバーヘッドを減らすことができます。
実行時に追加のライブラリを読み込むには、await
演算子を使用して、async
関数内から importLibrary()
を呼び出します。以下に例を示します。
const { Map } = await google.maps.importLibrary("maps");
次のコードサンプルは、Map
ライブラリと AdvancedMarkerView
ライブラリの両方を読み込む方法を示しています。
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerView } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerView({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerView } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerView({ map: map, position: position, title: "Uluru", }); } initMap();
Dynamic Library Import のライブラリ
Dynamic Library Import で使用できるライブラリは次のとおりです。
core
(google.maps.CoreLibrary
)maps
(google.maps.MapsLibrary
)places
(google.maps.PlacesLibrary
)geocoding
(google.maps.GeocodingLibrary
)routes
(google.maps.RoutesLibrary
)marker
(google.maps.MarkerLibrary
)geometry
(google.maps.GeometryLibrary
)elevation
(google.maps.ElevationLibrary
)streetView
(google.maps.StreetViewLibrary
)journeySharing
(google.maps.JourneySharingLibrary
)drawing
(google.maps.DrawingLibrary
)visualization
(google.maps.VisualizationLibrary
)
ブートストラップ URL のライブラリ(従来)
従来のブートストラップ スクリプト タグで使用できるライブラリは次のとおりです。drawing
: 地図上にポリゴン、矩形、ポリライン、円、マーカーを描画するためのグラフィカル ユーザー インターフェースを提供します。詳しくは、描画ライブラリのドキュメントをご覧ください。geometry
: 地表面上のスカラー幾何学値(距離、面積など)を計算するユーティリティ関数が含まれます。詳しくは、ジオメトリ ライブラリのドキュメントをご覧ください。journeySharing
: Google Maps Platform の運輸と物流のソリューションに関するサポートを利用できるようになります。localContext
: 指定された場所の付近にある、ユーザーとの関連性が高い重要なスポットを表示します。詳しくは、ローカル コンテキスト ライブラリのドキュメントをご覧ください。marker
: カスタマイズ性とパフォーマンスに優れる「高度なマーカー」を地図に追加できます。詳しくは、高度なマーカーのドキュメントをご覧ください。places
: 一定の範囲に存在する施設、地理的位置、有名なスポットなどを、アプリケーションで検索できるようにします。詳しくは、プレイス ライブラリのドキュメントをご覧ください。visualization
: データを視覚的に表現するヒートマップを提供します。詳しくは、可視化ライブラリのドキュメントをご覧ください。
次のブートストラップ リクエストは、Maps JavaScript API の google.maps.geometry
ライブラリのリクエストを従来のブートストラップ ローダ スクリプトに追加する方法を示しています。
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=initMap">
</script>
複数のライブラリをリクエストするには、リクエストをコンマで区切ります。
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places&callback=initMap">
</script>