ローカルコンテキストおよび地図のオプションの設定

Maps JavaScript API の「ローカルコンテキストライブラリ」は、ベータ版機能として提供してまいりましたが、導入数が限られていたため、v3.52.2 より非推奨となります。ローカルコンテキストライブラリの機能は別途お知らせがあるまでご利用いただけますが、新しいプロジェクトへの追加は推奨されません。

ローカルコンテキストライブラリのようなエクスペリエンスの構築に関心をお持ちの方は、Quick Builder の「Neighborhood Discovery」ソリューションを検討されるか、Maps JavaScript API のプレイスライブラリを活用されることをおすすめします。プレイスライブラリについては、コード例や Codelab もご用意しています。

このセクションでは、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',
  });
}