Pop-ups

Ein popover-Element zeigt Inhalte (in der Regel Text oder Bilder) für einen bestimmten Ort in einem Dialogfeld über der Karte an. Das Pop-over besteht aus einem Inhaltsbereich und einem Hinweisstrich. Die Spitze des Stiels ist mit einer bestimmten Position auf der Karte verbunden. Pop-ups werden für Screenreader als Dialogfeld angezeigt.

In der Regel wird ein Pop-up mit einer interaktiven Markierung verknüpft. Sie können es aber auch mit einer bestimmten LatLngAltitude-Koordinate verknüpfen oder es von einer Markierung versetzen.

Pop-up hinzufügen

Der Konstruktor PopoverElement verwendet ein PopoverElementOptions-Objektliteral, das die Anfangsparameter zum Anzeigen des Pop-ups 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-ups 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 auf der Karte gleichzeitig mehrere lightDismissDisabled-Pop-ups 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 im Slot header oder default explizit an den PopoverElement 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-ups sind standardmäßig scrollbar und haben eine vordefinierte maximale Höhe.

Pop-up an einer LatLngAltitude-Koordinate verankern

Pop-ups, die Sie erstellen, werden nicht automatisch auf der Karte angezeigt. Damit das Pop-over sichtbar wird, müssen Sie die Option open in PopoverElement auf true festlegen. Sie können diese Aktion während der Erstellung oder nach der Instanziierung ausführen.

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

Pop-over an eine Markierung anpinnen

Sie können Pop-ups an Markierungen anpinnen. Wenn Sie ein Pop-up hinzufügen, das an einer Markierung verankert ist, legen Sie die Option PopoverElement.positionAnchor so fest, dass die Markierung verwendet wird.

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

Pop-up mithilfe von HTML an einer Markierung verankern

Sie können Pop-ups auch an Markierungen anpinnen, ohne JavaScript-Code schreiben zu müssen, wie unten dargestellt:

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

Pop-up-Fenster benutzerdefinierte Inhalte hinzufügen

Sie können Pop-ups 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();