基本的な LocalContextMapView

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

以下は、カスタマイズなしの基本的なローカル コンテキストの地図表示です。 ここでは、ローカル コンテキスト ライブラリ固有の必須プロパティである placeTypePreferences および maxPlaceCount と、Map の基本プロパティである centerzoom のみが指定されています。

コードを理解する

ローカル コンテキストの地図のオプション

ローカル コンテキストの地図は、google.maps.Map クラスの代わりに google.maps.localContext.LocalContextMapView クラスで表されます。LocalContextMapView コンストラクタの 3 つの必須パラメータは、地図表示のコンテナとなるドキュメント オブジェクト モデル(DOM)内の要素と、地図に含める場所のタイプのリスト、検索の結果表示される場所の最大数です。

TypeScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [
    { type: "restaurant" },
    { type: "tourist_attraction" },
  ],
  maxPlaceCount: 12,
});

JavaScript

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [
    { type: "restaurant" },
    { type: "tourist_attraction" },
  ],
  maxPlaceCount: 12,
});

ローカル コンテキストの地図のビューポートを定義する

Place Search の locationRestriction 境界は、デフォルトでは地図のビューポートによって定義されます。google.maps.localContext.LocalContextMapView.map.setOptions() を最初に呼び出したときに、指定された中心とズームレベルに従って地図が読み込まれ、地図のビューポートが確立されます。

TypeScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});

JavaScript

map.setOptions({
  center: { lat: 51.507307, lng: -0.08114 },
  zoom: 14,
});

以降の setOptions() の呼び出しでは、ローカル コンテキスト ライブラリによって表示されている注目スポットは更新されません。

サンプルを試す