Popover

popover menampilkan konten (biasanya teks atau gambar) dalam jendela dialog di atas peta, di lokasi tertentu. Popover memiliki area konten dan batang meruncing. Ujung batang dilekatkan ke lokasi yang ditentukan pada peta. Popover muncul sebagai dialog untuk pembaca layar.

Biasanya Anda akan melampirkan popover ke penanda interaktif, tetapi Anda juga dapat melampirkan popover ke koordinat LatLngAltitude tertentu, atau mengimbangkannya dari penanda.

Menambahkan popover

Konstruktor PopoverElement menggunakan literal objek PopoverElementOptions, yang menentukan parameter awal untuk menampilkan popover.

Literal objek PopoverElementOptions berisi kolom berikut:

  • positionAnchor: Posisi LatLngAltitude tempat penanda akan ditampilkan. Jika menggunakan penanda, posisi penanda akan digunakan sebagai gantinya.
  • altitudeMode: Cara penafsiran ketinggian popover.
  • lightDismissDisabled: Apakah popover tetap terbuka saat pengguna mengklik di luar popover, atau menekan tombol Esc. Jika opsi ini disetel ke true, beberapa popover lightDismissDisabled dapat ditampilkan di peta secara bersamaan.
  • open: Menentukan apakah popover harus terbuka atau tidak. Nilai defaultnya adalah false.

Konten PopoverElement dapat berisi string teks, cuplikan HTML, atau elemen DOM. Anda menetapkan konten dengan menambahkannya ke PopoverElement secara eksplisit di slot header atau default.

Jika ingin mengukur konten secara eksplisit, Anda dapat menempatkannya dalam elemen <div> dan memberi gaya <div> dengan CSS. Popover dapat di-scroll secara default, dan memiliki tinggi maksimum yang telah ditentukan sebelumnya.

Menyematkan popover ke koordinat LatLngAltitude

Popover tidak akan otomatis ditampilkan pada peta setelah Anda membuatnya. Untuk membuat popover terlihat, Anda harus menyetel opsi open ke true di PopoverElement. Anda dapat melakukan tindakan ini selama konstruksi atau setelah instansiasi.

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

Menyematkan popover ke penanda

Anda dapat menambatkan popover ke penanda. Saat menambahkan popover yang ditambatkan ke penanda, Anda menetapkan opsi PopoverElement.positionAnchor untuk menggunakan penanda.

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

Menyematkan popover ke penanda menggunakan HTML

Anda juga dapat menyematkan popover ke penanda tanpa menulis kode JavaScript apa pun, seperti yang ditunjukkan di bawah:

<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>

Menambahkan konten kustom ke popover

Anda dapat menambahkan konten kustom ke popover dengan menyetel opsi header dan 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();