ローカル コンテキスト イベントへの対応

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

Place Details が表示されたときに変更されるレイアウトがある場合は、イベント リスナーの placedetailsviewshowstartplacedetailsviewhidestart を使用します。次のサンプルでは、カスタム マーカーによって 3 つの地区を示しています。ユーザーがこれらのマーカーのいずれかをクリックすると、その地区の説明の InfoWindow が表示されます。InfoWindow が開いているときにユーザーがスポットをクリックし、そのスポットの Place Details が表示されると、InfoWindow が閉じます。ユーザーが Place Details を閉じると再び開きます。

コードを理解する

Place Details 表示イベントによる InfoWindow の管理

Place Details が開き、InfoWindow.close() が呼び出されると、開いている InfoWindow が DOM から削除されます。InfoWindow を「復元」する機能を作成するためには、InfoWindow のプロパティを DOM 外の変数に格納し、再表示が必要なときに InfoWindow を再作成できるようにします。格納用の変数に情報を保存する最適なタイミングは、InfoWindow の作成時です。

let infoStorage;

function createInfoWindow(district, marker) {
  // Build the content of the InfoWindow
  let contentDiv = document.createElement('div');
  ...

  // Create and open a new InfoWindow
  infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent(contentDiv);
  infoWindow.open(map, marker);

  // Store key properties of the InfoWindow for future restoration
  infoStorage = {
    'district': district,
    'marker': marker,
  };
}

その後、Place Details が閉じられると、同じ InfoWindow 作成関数を呼び出して、直前まで開かれていた InfoWindow を再作成できます。

TypeScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});

JavaScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});

ルートの起点を更新する

この地図には、ユーザーが選択できる地区のマーカーが複数あるため、マーカーのクリック リスナー内のこれらの行を使用して、directionsOptions の起点を、最後にクリックされた地区に更新しています。これは、localContextMapView が初期化された後でも directionsOptions を更新できることを示しています。

サンプルを試す