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)が現在のビューポートから外れると、ローカル コンテキストを使った地図表示が自動的に移動して、そのスポットが可視範囲内に表示されます。その際、地図を管理するコードは必要ありません。
LocalContextMapView
の directionsOptions
プロパティに原点を指定しない場合、選択したスポットのみを表示するようマップが移動します。
原点に 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 }, });