このセクションでは、LocalContextMapView
インスタンス、および LocalContextMapView
に含まれる内部 Map
で設定できるオプションについて説明します。新しい LocalContextMapView
インスタンスを作成する際は、最大 10 種類の場所と、返される場所の最大数(最大 24 か所)を指定します。内部 Map
は、標準の Maps JavaScript API Map
と同じ MapOptions にすべて対応しています。
ローカル コンテキスト ライブラリの初期化後は、いつでもローカル コンテキスト検索プロパティを更新できます。maxPlaceCount
、placeTypePreferences
、locationRestriction
、locationBias
のいずれかを更新すると、新しい検索が自動的にトリガーされます。
場所のタイプを指定する
ローカル コンテキスト ライブラリが返す場所のタイプを、最大 10 個指定できます。以下の例のように、placeTypePreferences
プロパティを使用し、1 つ以上の場所のタイプを渡すことで、場所のタイプを指定します。
placeTypePreferences: ['restaurant', 'cafe']
場所のタイプの重み付け
指定した各タイプに相対的な重みを割り当てることもできます。その場合、重み付けが高いタイプの方が頻繁に表示されます。重みは任意で使用する高度なパラメータです。必要な場合のみ使用してください。このパラメータを省略すると、ローカル コンテキスト ライブラリによってデフォルトの重みが決定されます。この重みは時間の経過とともに変更、改善される可能性があります。
weight
属性を使用して、各プロパティに相対的な重み付けを割り当てることができます。以下の例では、指定した場所のタイプに重みを付けて、primary_school
の 2 倍の restaurant
と cafe
の結果を返すようにしています。
placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]
結果は、特定の場所のタイプが特定のエリアに存在するかどうかによって異なります。たとえば、shopping_mall
に 10 の重みを設定しても、そのエリアにショッピング モールが存在しない場合は効果がありません。
場所の最大数を設定する
ローカル コンテキスト ライブラリが返す場所の最大数(最大 24 個)を設定するには、次のように maxPlaceCount
プロパティを使用します。
maxPlaceCount: 12
地域の制限を設定する
検索が行われる範囲は、デフォルトでは地図ビューポートとなります。複数の範囲を指定して、検索結果をより大きなエリア、または小さなエリアに制限できます。その場合は、LocalContextMapView
の locationRestriction
プロパティを対象の LatLngBounds
に設定します。この値は、地図のビューポートと違う値にすることもできます。例はこちらをご覧ください。
ルートを有効化する
地図でルートを有効にするには、LocalContextMapView
の directionsOptions
プロパティを設定し、出発地の LatLng オブジェクト リテラルを渡します(目的地は選択されている場所によって決まります)。出発地点を指定しなかった場合、ルートは無効になります。次の例では、出発点を設定し、地図上で徒歩経路を有効にしています。
directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},
地図境界とズームレベルによって決まる地図のビューポートのサイズは、指定された出発地から返すことができる距離に直接影響します。たとえば、ビューポートが幅 100 マイルのエリアを表示する場合、出発地から最大 50 マイルの範囲にあるスポットが表示される可能性があります。アプリで妥当な距離の徒歩経路を返すようにするためには、次の点に留意してください。
- ズームレベルが低い(通常はズームレベル 16 未満)場合は、徒歩ルートを無効にします。
- 小さい境界エリアを使用して
locationRestriction
を定義します。これにより、制限エリアの外にはスポットが表示されなくなります。
ルートの出発地を変更する
directionsOptions
プロパティの値は、LocalContextMapView
のライフサイクル中にいつでも変更できます。次の例は、directionsOptions
に新しい値を設定しする方法を示しています。
localContextMapView.directionsOptions = {
origin: {lat: 47.6532809, lng: -122.3512206},
};
または
localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};
レイアウトと表示設定を設定する
LocalContextMapView
の placeChooserViewSetup
と placeDetailsViewSetup
プロパティを設定することで、Place Details とスポット選択ツールの初期レイアウトの位置と表示設定を指定できます。また、Place Details をプログラムで非表示にすることもできます。
スポット選択ツールのレイアウト位置を設定する
スポット選択ツールのレイアウト位置は、LocalContextMapView
を初期化する際に設定できます。レイアウト位置はドキュメントの向きに対応し、アプリが左から右(LTR)または右から左(RTL)かによって変わります。
スポット選択ツールには 3 つのレイアウト オプションがあります。
INLINE_START
は、コンテンツ フローの最初にスポット選択ツールを表示するよう設定します(LTR の場合は地図の左側、RTL の場合は右側)。INLINE_END
は、コンテンツ フローの最後にスポット選択ツールを表示するよう設定します(LTR の場合は地図の右側、RTL の場合は左側)。BLOCK_END
は、ページの下部にスポット選択ツールを表示するよう設定します(LTR と RTL のどちらでも同じです)。
スポット選択ツールの位置を INLINE_START
または INLINE_END
に設定する場合は、Place Details の位置を同じ値に設定する必要があります。必要に応じて、Place Details を情報ウィンドウ内に表示するよう設定することもできます。BLOCK_END
では、Place Details のレイアウト モードは常に INFO_WINDOW
に設定する必要があります。
ローカル コンテキスト ライブラリは、LocalContextMapView
のレンダリング サイズに基づいて、スポット選択ツールの位置をレスポンシブに変更します。大きな LocalContextMapView
では、デフォルトではコンテンツ フローの最初にスポット選択ツールが表示されます(LTR の場合は地図の左側、RTL の場合は右側)。小さな LocalContextMapView
(モバイル デバイスなど)では、デフォルトでは地図の下部にスポット選択ツールを表示し、情報ウィンドウ内に Place Details を表示するように変更されています。ブラウザのズームレベルは、スポット選択ツールの位置が側部と下部の間を移動する際のピクセルサイズに影響します(しきい値は、ズームレベルに比例して増加します)。
スポット選択ツールのデフォルト位置は、関数呼び出しを使用して設定することをおすすめします。この値を直接宣言すると、レスポンシブなレイアウト変更がオーバーライドされます。
コンテンツ フローの最初にスポット選択ツールを表示する
スポット選択ツールをコンテンツ フローの最初(LTR の場合はマップの左側、RTL の場合は右側)に設定するには、以下の例のように、placeChooserViewSetup
と placeDetailsViewSetup
の両方で position
を INLINE_START
に設定します。
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
});
コンテンツ フローの最後にスポット選択ツールを表示する
スポット選択ツールをコンテンツ フローの最後(LTR の場合は右側、RTL の場合は左側)に表示するよう設定するには、次の例のように、placeChooserViewSetup
と placeDetailsViewSetup
の両方で position
を INLINE_END
に設定します。
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
});
スポット選択ツールを下部に表示する
スポット選択ツールを地図の下部に表示するように設定するには、次の例のように、placeChooserViewSetup
の position
を BLOCK_END
に、placeDetailsViewSetup
の layoutMode
を INFO_WINDOW
に設定します。
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'BLOCK_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {layoutMode: 'INFO_WINDOW'};
}
},
});
スポット選択ツールを非表示にする
スポット選択ツールはデフォルトで表示されます。スポット選択ツールを非表示にするには、次の例のように layoutMode
を HIDDEN
に設定します。
placeChooserViewSetup: {layoutMode: 'HIDDEN'},
次の例では、デフォルトの位置が BLOCK_END
に変更されたときに、スポット選択ツールを非表示にしています。
const localContextMapView = new google.maps.localContext.LocalContextMapView({
placeChooserViewSetup: ({defaultPosition}) => {
if (defaultPosition === 'BLOCK_END') {
return {layoutMode: 'HIDDEN'};
}
},
});
情報ウィンドウに Place Details を表示する
Place Details を情報ウィンドウ内に表示するには、次の例のように layoutMode
を INFO_WINDOW
に設定します。
placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},
この設定は、スポット選択ツールの位置(左、右、下)をどこに設定しても併用できます。
プログラムによって Place Details を非表示にする
Place Details をプログラムによって非表示にするには、次の例のように、LocalContextMapView
インスタンスで hidePlaceDetailsView()
を呼び出します。
localContextMapView.hidePlaceDetailsView()
デフォルトでは、地図をクリックすると Place Details が非表示になります。placeDetailsViewSetup
の hidesOnMapClick
オプションを false
に設定すると、このデフォルトの動作をキャンセルできます。
// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: {hidesOnMapClick: false},
});
地図がクリックされたときに Place Details の情報ウィンドウのみを非表示にするには、次の例のように、hidesOnMapClick
値の設定を条件付きで制御できます。
// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: ({defaultLayoutMode}) => {
return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
},
});
内部 Map
のオプションを設定する
LocalContextMapView
インスタンスを作成したら、内部 Map
インスタンスで MapOptions を設定できます。LocalContextMapView
に含まれる Map
は、標準の Maps JavaScript API の地図と同じ地図オプションすべてに対応しています。次の例では、新しい LocalContextMapView
インスタンスを作成し、内部 Map
でいくつかのオプションを設定しています。
// Instantiate LocalContextMapView.
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 12,
});
// Set inner map options.
localContextMapView.map.setOptions({
center: pos,
zoom: 14,
mapTypeId: 'satellite',
});
}