종속된 오버레이 + 오버레이창 위치 고정

종속 오버레이

아래 질문에 대한 보충입니다.
현재 여러개의 마커를 생성하여 마커를 클릭하면 해당하는 인포윈도우가 뜨게 되어있습니다.
다른 마커를 클릭하면 기존 인포윈도우는 닫히고 클릭한 마커의 인포윈도우만 열립니다.

현재 진행 중인 내용이 그림과 같습니다.

  1. 인포윈도우의 제목을 클릭하면
    모니터의 우측에 오버레이가 생성되어 상세정보가 출력되고

  2. 인포윈도우를 닫으면 오버레이 또한 같이 닫히는 것을 만들고자 합니다.

코드의 방향이나 예제를 알려주시면 힘껏 공부하겠습니다.
고맙습니다.

딱히 지도 객체의 기능을 쓸 필요는 없어 보입니다.

해당 위치에 고정된 인포 패널이 필요한 상황이므로
그냥 div 엘리먼트 하나를 position 및 size 적당히 지정하고
내부 컨텐츠를 구성하신 뒤에
지도 엘리먼트보다 위쪽에 위치하도록 (필요하면 z-index 조정) 하여 띄워주시면 됩니다.
일반적인 마크업 작업이라 생각하시면 되요

답변 감사합니다.

모니터 우측에 인포채널이 항상 떠있지는 않고
인포창을 클릭했을 때 인포채널이 뜨는 예제를 찾고 있습니다.

  1. 인포창을 클릭했을 때 div 가 뜨고
  2. div 를 닫으면 div가 닫히고
  3. 인포창을 닫으면 div 도 닫히는 (인포창에 종속된 인포채널)

예제가 있는지 궁금합니다…
항상 감사합니다.

항상 떠 있는지 아닌지는 중요하지 않습니다.
그건 이벤트로 조절할 수 있으니까요.

[마커] - [커스텀 오버레이] - [인포 패널]

을 한 세트로 생각하시고

  • 커스텀 오버레이의 x 버튼 클릭 이벤트: 커스텀 오버레이 닫기, 인포 패널 hide
  • 인포 패널의 x 버튼 클릭 이벤트: 위와 똑같은 핸들러 등록 (커스텀 오버레이 닫기, 인포 패널 hide)

DOM Event를 다루는 것과 다른게 없습니다.
View(인포 패널)만 만들어 두고 단순 이벤트 연결해서 show/hide 하는 작업이라
이벤트 관련한 샘플 참고하시고 응용하시면 충분히 구현하실 수 있습니다.