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 Popover besteht aus einem Inhaltsbereich und einem Hinweisstrich. Der Hinweisstrich zeigt auf eine bestimmte Position auf der Karte. Popovers werden für Screenreader als Dialog dargestellt.

In der Regel hängen Sie ein Pop-over an eine interaktive Markierung an. Sie können es aber auch an eine bestimmte LatLngAltitude-Koordinate anhängen oder 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 des Pop-overs klickt oder die Taste Esc drückt. Wenn diese Option auf true festgelegt ist, können mehrere lightDismissDisabled-Pop-over 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 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. Popovers sind standardmäßig scrollbar und haben eine vordefinierte maximale Höhe.

Popover an einer LatLngAltitude-Koordinate verankern

Die Pop-over, 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 festlegen. Sie können diese Aktion während der Erstellung oder nach der Instanziierung ausführen.

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

Pop-over an einer Markierung verankern

Sie können Popover an Markierungen verankern. Wenn Sie ein Popover 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',
    });

    // 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 Popovers 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 zu einem Popover hinzufügen

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