Pop-ups

Ein popover-Element zeigt Inhalte (in der Regel Text oder Bilder) für einen bestimmten Ort in einem Dialogfenster über der Karte an. Das Popover hat einen Inhaltsbereich und einen sich verjüngenden Stiel. Die Spitze des Stiels ist an einem bestimmten Ort auf der Karte angebracht. Popovers werden Screenreadern als Dialog angezeigt.

Normalerweise wird ein Pop-over an eine interaktive Markierung angehängt. Sie können ein Pop-over aber auch an eine bestimmte LatLngAltitude-Koordinate anhängen oder es von einer Markierung versetzen.

Pop‑over hinzufügen

Der Konstruktor PopoverElement verwendet ein PopoverElementOptions-Objektliteral, das die Anfangsparameter zum Anzeigen des Pop-overs angibt.

Das PopoverElementOptions-Objektliteral enthält die folgenden Felder:

  • positionAnchor: Die LatLngAltitude-Position, an der die Markierung angezeigt werden soll. Wenn Sie eine Markierung verwenden, wird stattdessen die Position der Markierung verwendet.
  • altitudeMode: Wie die Höhe des Pop-overs interpretiert wird.
  • lightDismissDisabled: Gibt an, ob das Pop-over geöffnet bleibt, wenn der Nutzer außerhalb davon klickt oder die Taste Esc drückt. Wenn diese Option auf true festgelegt ist, können mehrere lightDismissDisabled-Pop-overs gleichzeitig auf der Karte angezeigt werden.
  • open: Gibt an, ob das Pop-over geöffnet sein soll oder nicht. Die Standardeinstellung ist false.

Der Inhalt des PopoverElement-Elements kann aus Text, einem HTML-Snippet oder einem DOM-Element bestehen. Sie legen den Inhalt fest, indem Sie ihn explizit an das PopoverElement-Element im header- oder default-Slot anhängen.

Wenn Sie die Größe des Inhalts explizit festlegen möchten, können Sie ihn in einem <div>-Element platzieren und das <div>-Element mithilfe von CSS gestalten. Pop-overs sind standardmäßig scrollbar und haben eine vordefinierte maximale Höhe.

Popover an einer LatLngAltitude-Koordinate verankern

Wenn Sie ein Pop-over erstellen, wird es nicht automatisch auf der Karte angezeigt. Damit es sichtbar ist, müssen Sie die Option open im PopoverElement auf true setzen. Das können Sie während der Erstellung oder nach der Instanziierung tun.

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',
        gestureHandling: 'COOPERATIVE',
    });

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

Pop-over an einer Markierung verankern

Sie können Pop-overs an Markierungen verankern. Wenn Sie ein Pop-over hinzufügen, das an einer Markierung verankert ist, legen Sie die Option PopoverElement.positionAnchor fest, um die Markierung zu verwenden.

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',
        gestureHandling: 'COOPERATIVE',
    });

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

Popover mithilfe von HTML an einer Markierung verankern

Sie können Pop-overs auch ohne JavaScript-Code an Markierungen verankern, wie unten gezeigt:

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

Benutzerdefinierte Inhalte in ein Pop-over einfügen

Sie können Pop-overs benutzerdefinierte Inhalte hinzufügen, indem Sie die Optionen header und content festlegen:

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