ローカル コンテキストの検索範囲の調整

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

LocalContextMapView スポット検索の locationRestriction パラメータを、デフォルトの状態(地図ビューポートにより厳密に固定)から変更することができます。このサンプルでは、locationRestriction の範囲を地図の最初のビューポートよりも大きく設定しています。スポット選択ツールでスポットをクリックすると、地図が移動し、選択したスポットが表示されることを確認してみましょう。

コードを理解する

ローカル コンテキストの検索範囲の指定

LatLngBounds プロパティで locationRestriction の厳密に固定した検索範囲を定義します。このサンプルでは、LatLngBoundsLiteral インターフェースを使用して LatLngBounds オブジェクトを作成します。

TypeScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

JavaScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});

ローカル コンテキストを使った地図のビューポートと directionsOptions の関係

選択したスポット(POI)が現在のビューポートから外れると、ローカル コンテキストを使った地図表示が自動的に移動して、そのスポットが可視範囲内に表示されます。その際、地図を管理するコードは必要ありません。

LocalContextMapViewdirectionsOptions プロパティに原点を指定しない場合、選択したスポットのみを表示するようマップが移動します。

原点に directionsOptions を指定すると、地図には起点と選択したスポットの両方に加え、2 つの地点間の徒歩ルートも示されます。

TypeScript

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

JavaScript

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

サンプルを試す