Pop-ups

Une popover affiche du contenu (généralement du texte ou des images) dans une fenêtre de dialogue au-dessus de la carte, à un emplacement donné. La popover se compose d'une zone de contenu et d'un pied effilé. La pointe du pied est associée à un emplacement spécifié sur la carte. Les popovers s'affichent sous forme de boîte de dialogue pour les lecteurs d'écran.

En règle générale, vous associez une popover à un repère interactif, mais vous pouvez également l'associer à une coordonnée LatLngAltitude spécifique ou la décaler par rapport à un repère.

Ajouter une popover

Le PopoverElement constructeur utilise un PopoverElementOptions littéral d'objet, qui spécifie les paramètres initiaux d'affichage de la popover.

Le littéral d'objet PopoverElementOptions contient les champs suivants :

  • positionAnchor: position LatLngAltitude à laquelle afficher le repère. Si vous utilisez un repère, sa position sera utilisée à la place.
  • altitudeMode : mode d'interprétation de l'altitude de la popover.
  • lightDismissDisabled: indique si la popover reste ouverte lorsque l'utilisateur clique en dehors ou appuie sur la touche Esc. Lorsque cette option est définie sur true, plusieurs popovers lightDismissDisabled peuvent s'afficher simultanément sur la carte.
  • open : indique si la popover doit être ouverte ou non. La valeur par défaut est false.

Le contenu de PopoverElement peut contenir une chaîne de texte, un extrait de code HTML ou un élément DOM. Pour définir le contenu, ajoutez-le explicitement à PopoverElement dans l'emplacement header ou default.

Si vous souhaitez dimensionner explicitement le contenu, vous pouvez le placer dans un élément <div> et appliquer un style <div> avec CSS. Les popovers sont défilables par défaut et ont une hauteur maximale prédéfinie.

Ancrer une popover à une coordonnée LatLngAltitude

Lorsque vous créez une popover, elle ne s'affiche pas automatiquement sur la carte. Pour la rendre visible, vous devez définir l'option open sur true dans PopoverElement. Vous pouvez effectuer cette action lors de la construction ou après l'instanciation.

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

Ancrer une popover à un repère

Vous pouvez ancrer des popovers à des repères. Lorsque vous ajoutez une popover ancrée à un repère, vous définissez l'option PopoverElement.positionAnchor pour utiliser le repère.

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

Ancrer une popover à un repère à l'aide de HTML

Vous pouvez également ancrer des popovers à des repères sans écrire de code JavaScript, comme indiqué ci-dessous :

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

Ajouter du contenu personnalisé à une popover

Vous pouvez ajouter du contenu personnalisé aux popovers en définissant les options header et content :

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