Pop-ups

Un 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 pop-over 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 pop-ups s'affichent sous la forme d'une boîte de dialogue pour les lecteurs d'écran.

En général, vous associez un pop-up à un repère interactif, mais vous pouvez également l'associer à 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 pop-over.

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 : interprétation de l'altitude du pop-over.
  • lightDismissDisabled : indique si le pop-up reste ouvert lorsque l'utilisateur clique en dehors ou appuie sur la touche Esc. Lorsque cette option est définie sur true, plusieurs pop-ups lightDismissDisabled peuvent s'afficher simultanément sur la carte.
  • open : indique si le pop-over 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 à l'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 pop-overs sont défilables par défaut et ont une hauteur maximale prédéfinie.

Ancrer un pop-over à une coordonnée LatLngAltitude

Lorsque vous créez un pop-over, il ne s'affiche pas automatiquement sur la carte. Pour rendre le pop-over 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 { 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

Ancrer un pop-over à un repère

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

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

Ancrer un pop-over à un repère à l'aide de HTML

Vous pouvez également ancrer des pop-ups à 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 pop-over

Vous pouvez ajouter du contenu personnalisé aux pop-ups 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();