ローカル コンテキスト ライブラリをプロジェクトに追加し、ローカル コンテキストの地図表示を初期化、構成する手順は次のとおりです。
必要な API と SDK を有効にする
ローカル コンテキスト ライブラリを使用するには、Maps JavaScript API と Places API を有効にする必要があります。そのためには、1 つ以上の API または SDK を有効にする手順に従います。両方の API を、Google Cloud Console の同じプロジェクトで有効にする必要があります。
ローカル コンテキスト ライブラリを読み込む
ローカル コンテキスト ライブラリを読み込むには、通常どおりに Maps JavaScript API を読み込み、次のパラメータを含めます。
libraries=localContext
は、ローカル コンテキスト ライブラリを読み込みます。- このリリースを使用するには
v=beta
が必要です。 key
は API キーを格納します。callback
はinitMap()
関数を実行します。
次の例は、前述のすべてのオプションを含むスクリプトタグです。
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext&v=beta&callback=initMap">
</script>
新しいローカル コンテキスト地図表示を作成する
ローカル コンテキスト ライブラリをウェブページに追加するには、まず LocalContextMapView
インスタンスを作成し、必要なプロパティを設定します。
element
- 地図を表示するdiv
要素(この例では「map」という名前)。placeTypePreferences
- ローカル コンテキスト ライブラリが返す場所の種類(最大 10 種類)。maxPlaceCount
- 表示する場所の最大数(1~24 個)。locationRestriction
(省略可) - 場所検索を特定の地域に制限します。デフォルトでは地図のビューポートに設定されています。
LocalContextMapView
インスタンスを取得したら、内部の Map
インスタンスで地図のオプションを設定できます。LocalContextMapView
に含まれる地図は、標準の Maps JavaScript API の地図と同じ地図オプションすべてに対応しています。次の例では、新しい LocalContextMapView
インスタンスを作成し、内部 Map
でいくつかのオプションを設定しています。
TypeScript
let map: google.maps.Map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: [ { type: "restaurant" }, { type: "tourist_attraction" }, ], maxPlaceCount: 12, }); map = localContextMapView.map!; map.setOptions({ center: { lat: 51.507307, lng: -0.08114 }, zoom: 14, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: [ { type: "restaurant" }, { type: "tourist_attraction" }, ], maxPlaceCount: 12, }); map = localContextMapView.map; map.setOptions({ center: { lat: 51.507307, lng: -0.08114 }, zoom: 14, }); } window.initMap = initMap;
ローカル コンテキスト データの読み込みを延期する
LocalContextMapView
maxPlaceCount
オプションを 0 に設定すると、初期化時にローカル コンテキスト データの読み込みを延期できます。これは、ユーザーがデータを表示する準備が整うまで待つ場合に便利です。ローカル コンテキスト データを読み込む準備ができたら、maxPlaceCount
を 1 以上の値に設定します。次の例では、ローカル コンテキスト データを読み込まずに地図を初期化し、maxPlaceCount
を設定してデータを読み込んでいます。
// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
});
//...
// Show places now.
localContextMapView.maxPlaceCount = 12;
ローカル コンテキスト UI の表示を切り替える
LocalContextMapView
maxPlaceCount
オプションを 0 に設定すると、ローカル コンテキストのユーザー インターフェース要素を切り替えることができます。ローカル コンテキストのユーザー インターフェースを再度表示するには、maxPlaceCount
を 1 以上の値に設定します。
地図の最小サイズを設定する
ローカル コンテキスト ライブラリは、LocalContextMapView
のレンダリング サイズに基づき、レスポンシブに表示サイズを変更します。LocalContextMapView
でサポートされる最小サイズは次のとおりです。
- 300 x 480 ピクセル(縦向き)
- 480 x 380 ピクセル(横向き)
LocalContextMapView
を格納する要素が、サポートされる最小サイズを下回った場合は、スポット選択ツールやスポットなどのローカル コンテキスト ライブラリの要素は表示されません。ブラウザのズームレベルが、サポートされる最小サイズに影響します。たとえば、ブラウザ ウィンドウを 200% にズームすると、サポートされる最小サイズは 600 x 960(縦向き)と 960 x 760(横向き)になります。
CSS に関する推奨事項
ローカル コンテキスト ライブラリ DOM の CSS クラスは、公開 API の一部ではなく、ローカル コンテキスト ライブラリ DOM 内での要素のスタイル設定、変更、選択はサポートされていません。DOM スタイルの競合を回避し、ローカル コンテキスト ライブラリの地図表示が適切に処理されるように、次のガイドラインに即すことを強くおすすめします。
- ローカル コンテキスト ライブラリの CSS クラスは、予告なく変更されることがあるので、使用しないでください。
- ローカル コンテキスト ライブラリの DOM 内の要素は、スタイル設定、変更、選択を行わないでください。
そのような操作を行う CSS フレームワークを使用すると、スタイルの競合を回避できる場合があります。
たとえば、ページ全体の box-sizing
を border-box
に変更するには、次のように設定します。
<html>
要素をborder-box
に設定するbox-sizing
オーバーライドを使用します。- ローカル コンテキスト ライブラリの地図表示を含む要素に、
box-sizing: initial
を使用します。 - 他のすべての要素には、
box-sizing: inherit
を使用します。
これにより、ローカル コンテキスト ライブラリの DOM で、低特異性セレクタによって box-sizing
が標準のデフォルト設定にリセットされるようになります。
コードは次のようになります。
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.container-for-google-maps {
box-sizing: initial;
}