이 페이지는 Cloud Translation API를 통해 번역되었습니다.

팝오버

popover는 지도 위의 지정된 위치에 대화상자 창으로 콘텐츠 (보통 텍스트나 이미지)를 표시합니다. 팝오버는 콘텐츠 영역과 꼬리표로 이루어집니다. 꼬리표의 끝은 지정된 위치에 연결됩니다. 팝오버는 스크린 리더에 대화상자로 표시됩니다.

일반적으로 팝오버는 상호작용형 마커에 연결하지만 특정 LatLngAltitude 좌표에 연결하거나 마커에서 오프셋할 수도 있습니다.

PopoverElement 생성자는 PopoverElementOptions 객체 리터럴을 사용하며, 이는 팝오버를 표시하기 위한 초기 매개변수를 지정합니다.

PopoverElementOptions 객체 리터럴에는 다음 필드가 포함됩니다.

positionAnchor: 마커를 표시할 LatLngAltitude 위치입니다. 마커를 사용하는 경우 마커의 위치가 대신 사용됩니다.
altitudeMode: 팝오버의 고도가 해석되는 방식입니다.
lightDismissDisabled: 사용자가 팝오버 외부를 클릭하거나 Esc 키를 누를 때 팝오버가 열린 상태로 유지되는지 여부입니다. 이 옵션을 true로 설정하면 지도에 여러 lightDismissDisabled 팝오버가 동시에 표시될 수 있습니다.
open: 팝오버를 열지 여부를 지정합니다. 기본값은 false입니다.

PopoverElement의 콘텐츠에는 텍스트 문자열, HTML 스니펫 또는 DOM 요소가 포함될 수 있습니다. header 또는 default 슬롯에서 PopoverElement에 콘텐츠를 명시적으로 추가하여 콘텐츠를 설정합니다.

콘텐츠 크기를 명시적으로 지정하려면 <div> 요소에 배치하고 CSS로 <div>의 스타일을 지정하세요. 팝오버는 기본적으로 스크롤 가능하며 사전 정의된 최대 높이가 있습니다.

팝오버를 만든다고 지도에 자동으로 표시되지 않습니다. 팝오버를 표시하려면 PopoverElement에서 open 옵션을 true로 설정해야 합니다. 이 작업은 생성 중에 또는 인스턴스화 후에 실행할 수 있습니다.

async function init() {
    const { AltitudeMode, Map3DElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 }, range: 4000, tilt: 74, heading: 38,
        mode: MapMode.HYBRID,
    });
    const popover = new PopoverElement({
        altitudeMode: AltitudeMode.ABSOLUTE,
        open: true,
        positionAnchor: { lat: 37.819852, lng: -122.478549, altitude: 150 },
    });
    popover.append('Golden Gate Bridge');
    map.append(popover);
    document.body.append(map);
}
init();index.js

풍선을 마커에 고정할 수 있습니다. 마커에 고정된 팝오버를 추가할 때는 마커를 사용하도록 PopoverElement.positionAnchor 옵션을 설정합니다.

async function init() {
    const { AltitudeMode, Map3DElement, Marker3DInteractiveElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 }, range: 4000, tilt: 74, heading: 38,
        mode: MapMode.HYBRID,
    });
    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: AltitudeMode.ABSOLUTE,
        position: { lat: 37.819852, lng: -122.478549, altitude: 100 }
    });
    const popover = new PopoverElement({
        open: false,
        positionAnchor: interactiveMarker,
    });
    popover.append('Golden Gate Bridge');
    interactiveMarker.addEventListener('gmp-click', (event) => {
        // toggle the marker to the other state (unlee you are clicking on the marker itself when it reopens it)
        popover.open = !popover.open;
    });
    map.append(interactiveMarker);
    map.append(popover);
    document.body.append(map);
}
init();index.js

아래와 같이 JavaScript 코드를 작성하지 않고도 풍선을 마커에 고정할 수 있습니다.

<gmp-map-3d mode="hybrid" center="37.819852,-122.478549" tilt="75" range="2000" heading="330">
  <gmp-marker-3d-interactive gmp-popover-target="my-popover" position="37.819852,-122.478549,100"></gmp-marker-3d-interactive>
  <gmp-popover id="my-popover">
    Golden Gate Bridge
  </gmp-popover>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGl0teQ6qwaBEdHazOWIEXd8XGWOZvoaM&v=beta&libraries=maps3d">
</script>

header 및 content 옵션을 설정하여 팝오버에 맞춤 콘텐츠를 추가할 수 있습니다.

async function init() {
  const {Map3DElement, MapMode, PopoverElement, AltitudeMode} = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
    tilt: 75,
    heading: 330,
    mode: MapMode.SATELLITE,
  });

  const popover = new PopoverElement({
    altitudeMode: AltitudeMode.ABSOLUTE,
    open: true,
    positionAnchor: {lat: 37.819852, lng: -122.478549, altitude: 100},
  });

  const header = document.createElement('div');
  header.style.fontWeight = 'bold';
  header.slot = 'header';
  header.textContent = 'Golden Gate Bridge';
  const content = document.createElement('div');
  content.textContent = 'Iconic orange bridge connecting San Francisco to Marin.';

  popover.append(header);
  popover.append(content);

  document.body.append(map);
  map.append(popover);
}

init();

팝오버

팝오버 추가

LatLngAltitude 좌표에 팝오버 고정

마커에 팝오버 고정

HTML을 사용하여 마커에 팝오버 고정

팝오버에 맞춤 콘텐츠 추가