Pop-ups

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

En général, les popovers sont associés à un repère interactif, mais vous pouvez aussi en associer un à une coordonnée LatLngAltitude spécifique ou le décaler par rapport à un repère.

Ajouter un pop-over

Le constructeur PopoverElement utilise un littéral d'objet PopoverElementOptions, qui spécifie les paramètres initiaux d'affichage du 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 : comment l'altitude du popover est interprétée.
  • lightDismissDisabled : indique si le popover reste ouvert lorsque l'utilisateur clique en dehors de celui-ci 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 le popover doit être ouvert ou non. La valeur par défaut est false.

PopoverElement peut contenir une chaîne de texte, un extrait de code HTML ou un élément DOM. Vous définissez le contenu en l'ajoutant 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 à cet élément <div> avec le CSS. Les popovers sont défilables par défaut et ont une hauteur maximale prédéfinie.

Ancrer un popover à une coordonnée LatLngAltitude

Lorsque vous créez un popover, il ne s'affiche pas automatiquement sur la carte. Pour rendre le popover visible, vous devez définir l'option open sur true dans PopoverElement. Vous pouvez effectuer cette action pendant 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',
    });

    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 un popover à un repère

Vous pouvez ancrer des popovers aux repères. Lorsque vous ajoutez un popover ancré à 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',
    });

    // 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 un popover à un repère en 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é à un 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();