로컬 컨텍스트 이벤트에 응답하기

장소 세부정보 뷰가 표시될 때 바꾸고자 하는 레이아웃이 있는 경우 placedetailsviewshowstartplacedetailsviewhidestart 이벤트 리스너를 사용하세요. 아래 샘플에는 세 개의 구역이 맞춤 마커로 표시되어 있습니다. 사용자가 이 구역 마커 중 하나를 클릭하면 구역을 설명하는 InfoWindow가 열립니다. InfoWindow가 열려 있을 때 사용자가 관심 장소를 클릭하면 해당 관심 장소의 장소 세부정보 뷰가 표시될 때 InfoWindow가 닫히고 사용자가 장소 세부정보 뷰를 닫을 때 다시 열립니다.

코드 이해하기

장소 세부정보 뷰 이벤트로 InfoWindow 관리

장소 세부정보 뷰가 열리고 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,
  };
}

나중에 장소 세부정보 뷰가 닫히면 동일한 InfoWindow 생성 함수를 호출하여 마지막으로 열려 있던 InfoWindow를 다시 만들 수 있습니다.

TypeScript

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

자바스크립트

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

경로 출발지 업데이트

이 지도에는 사용자가 선택할 수 있는 여러 개의 구역 마커가 있으므로 마커의 클릭 리스너에서 다음 행을 사용하여 directionsOptions의 출발지를 마지막으로 클릭된 구역으로 업데이트합니다. 이는 localContextMapView가 초기화된 후에도 directionsOptions를 업데이트할 수 있다는 것을 보여줍니다.

샘플 사용해 보기