ポップオーバー

A popover は、指定された位置で地図の上にダイアログ ウィンドウを開き、コンテンツ（通常はテキストや画像）を表示します。ポップオーバーには、コンテンツ領域と先細の突起部分があります。突起の先端は、地図上の指定された位置に接続されています。ポップオーバーは、スクリーン リーダーのダイアログとして表示されます。

通常、ポップオーバーはインタラクティブ マーカーに接続しますが、特定のLatLngAltitude座標に接続したり、マーカーからオフセットしたりすることもできます。

ポップオーバーを追加する

PopoverElement コンストラクタは、 PopoverElementOptions オブジェクト リテラルを取得します。これは、 ポップオーバーを表示する際の初期パラメータを指定します。

PopoverElementOptions オブジェクト リテラルには次のフィールドがあります。

• positionAnchor: マーカーを表示する LatLngAltitude 位置。マーカーを使用する場合は、マーカーの位置が使用されます。
• altitudeMode: ポップオーバーの高度の解釈方法。
• lightDismissDisabled: ユーザーがポップオーバーの外側をクリックしたとき、または Esc キーを押したときに、ポップオーバーを開いたままにするかどうか。このオプションを true に設定すると、複数の lightDismissDisabled ポップオーバーを地図上に同時に表示できます。
• open: ポップオーバーを開くかどうかを指定します。デフォルトは false です。

PopoverElement のコンテンツには、テキスト文字列、HTML スニペット、または DOM 要素を指定できます。コンテンツを設定するには、header スロットまたは default スロットで PopoverElement に明示的に追加します。

コンテンツのサイズを明示的に設定する場合は、<div> 要素 に配置して、CSS で <div> のスタイルを設定します。ポップオーバーはデフォルトでスクロール可能で、最大高さが事前に定義されています。

重要: 最適なユーザー エクスペリエンスを提供するために、 地図上で開くポップオーバーは 1 つのみにします。複数のポップオーバーが地図上に開くと、雑然として見えます。一度に 1 つのポップオーバーしか必要ない場合は、PopoverElement オブジェクトを 1 つだけ作成し、さまざまな場所やマーカーで、ユーザーのクリックなどの地図イベントに対してそのオブジェクトを開きます。複数のポップオーバーが必要な場合は、lightDismissDisabled を true に設定することで、複数の PopoverElement オブジェクトを同時に表示できます。

ポップオーバーを LatLngAltitude 座標に固定する

ポップオーバーを作成したとき、地図上に自動的には表示されません。ポップオーバーを表示するには、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,
        gestureHandling: 'COOPERATIVE',
    });
    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,
        gestureHandling: 'COOPERATIVE',
    });
    // 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

HTML を使用してポップオーバーをマーカーに固定する

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();