Popover

popover menampilkan konten (biasanya teks atau gambar) dalam jendela dialog di atas peta, pada lokasi yang ditentukan. 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 menggesernya 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 untuk menampilkan penanda. Jika menggunakan penanda, posisi penanda akan digunakan.
• altitudeMode: Cara ketinggian popover ditafsirkan.
• 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.

Penting: Untuk pengalaman pengguna yang terbaik, seharusnya hanya satu popover yang dibuka di peta pada satu waktu. Lebih dari satu popover akan membuat peta tampak berantakan. Jika Anda hanya memerlukan satu popover pada satu waktu, buat satu objek PopoverElement saja lalu buka objek ini di lokasi atau penanda yang berbeda pada peristiwa peta, seperti klik pengguna. Jika memerlukan lebih dari satu popover, Anda dapat menampilkan beberapa objek PopoverElement secara bersamaan dengan menetapkan lightDismissDisabled ke true.

Menambatkan popover ke koordinat LatLngAltitude

Saat Anda membuat popover, popover tidak akan otomatis ditampilkan di peta. Agar popover terlihat, Anda harus menetapkan opsi open ke true di PopoverElement. Anda dapat melakukan tindakan ini selama konstruksi atau setelah pembuatan instance.

async function init() {
    const { Map3DElement, 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: 'HYBRID',
    });

    const popover = new PopoverElement({
        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);
}

void init();
index.js

Menambatkan 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 { Map3DElement, Marker3DInteractiveElement, 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: 'HYBRID',
    });

    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        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', () => {
        // 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);
}

void init();
index.js

Menambatkan popover ke penanda menggunakan HTML

Anda juga dapat menambatkan 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 menetapkan 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();