スタートガイド

ローカル コンテキスト ライブラリをプロジェクトに追加し、ローカル コンテキストの地図表示を初期化、構成する手順は次のとおりです。

必要な 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;
index.ts

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;
index.js

ローカル コンテキスト データの読み込みを延期する

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;
}