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. Der Hinweisstrich zeigt auf eine bestimmte Position auf der Karte. Pop-overs werden für Screenreader als Dialog dargestellt.

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

Popover 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 Position des LatLngAltitude, 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

Die Pop-overs, die Sie erstellen, werden nicht automatisch auf der Karte angezeigt. Damit das Pop-over sichtbar ist, müssen Sie die Option open in der 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,
    });
    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 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 { 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

Popover mithilfe von HTML an einer Markierung verankern

Sie können Pop-overs auch ohne JavaScript-Code an Markierungen verankern, 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>

Einem Pop-over benutzerdefinierte Inhalte hinzufügen

Sie können benutzerdefinierte Inhalte in Pop-overs einfü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();