Pop-ups

Ein popover zeigt Inhalte (in der Regel Text oder Bilder) für einen bestimmten Ort in einem Dialogfenster über der Karte an. Das Popover besteht aus einem Inhaltsbereich und einem Hinweisstrich. Der Hinweisstrich zeigt auf eine bestimmte Position auf der Karte. Popover werden für Screenreader als Dialog dargestellt.

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

Popover hinzufügen

Der PopoverElement Konstruktor verwendet ein PopoverElementOptions Objektliteral, das die Anfangsparameter zum Anzeigen des Popovers 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 Popovers interpretiert wird.
  • lightDismissDisabled: Gibt an, ob das Popover geöffnet bleibt, wenn der Nutzer außerhalb darauf klickt oder die Esc-Taste drückt. Wenn diese Option auf true gesetzt ist, können mehrere lightDismissDisabled-Popover gleichzeitig auf der Karte angezeigt werden.
  • open: Gibt an, ob das Popover 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 im header- oder default-Slot an das PopoverElement-Element 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> mithilfe von CSS gestalten. Popover sind standardmäßig scrollbar und haben eine vordefinierte maximale Höhe.

Popover an einer LatLngAltitude-Koordinate verankern

Die Popover, die Sie erstellen, werden nicht automatisch auf der Karte angezeigt. Damit das Popover sichtbar ist, müssen Sie die Option open im PopoverElement auf true setzen. 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,
        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

Popover an einer Markierung verankern

Sie können Popover an Markierungen verankern. Wenn Sie ein Popover hinzufügen, das an einer Markierung verankert ist, setzen Sie die Option PopoverElement.positionAnchor so, 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,
        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

Popover mithilfe von HTML an einer Markierung verankern

Sie können Popover 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>

Popover benutzerdefinierte Inhalte hinzufügen

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