Pop-ups

A popover mostra conteúdo (normalmente texto ou imagens) em uma caixa de diálogo acima do mapa, em um determinado local. A popover tem uma área de conteúdo e uma ponta afunilada. A ponta da haste é anexada a um local especificado no mapa. As popovers aparecem como uma caixa de diálogo para leitores de tela.

Normalmente, você anexa uma popover a um marcador interativo, mas também é possível anexar uma popover a uma coordenada LatLngAltitude específica ou deslocá-la de um marcador.

Adicionar uma popover

O construtor usa um PopoverElementOptions literal de objeto, que especifica os parâmetros iniciais para mostrar a popover.PopoverElement

O objeto literal PopoverElementOptions contém os seguintes campos:

• positionAnchor: a posição LatLngAltitude em que o marcador será mostrado. Se você estiver usando um marcador, a posição dele será usada.
• altitudeMode: como a altitude da popover é interpretada.
• lightDismissDisabled: indica se a popover permanece aberta quando o usuário clica fora dela ou pressiona a tecla Esc. Quando essa opção é definida como true, várias popovers lightDismissDisabled podem ser mostradas no mapa simultaneamente.
• open: determina se a popover deve estar aberta ou não. O padrão é false.

O conteúdo da PopoverElement pode ser uma string de texto, um snippet de HTML ou um elemento DOM. Para definir o conteúdo, anexe-o à PopoverElement explicitamente no slot header ou default.

Se você quiser dimensionar o conteúdo explicitamente, coloque-o em um elemento <div> e estilize o <div> com CSS. As popovers podem ser roladas por padrão e têm uma altura máxima predefinida.

Importante: para ter a melhor experiência do usuário, apenas uma popover deve ser aberta no mapa por vez. Mostrar várias popovers no mapa deixa uma impressão confusa. Se você precisa de uma popover por vez, crie e abra apenas um objeto PopoverElement em locais ou marcadores diferentes em eventos do mapa, como cliques do usuário. Se quiser mais de uma popover, mostre vários objetos PopoverElement ao mesmo tempo definindo lightDismissDisabled como true.

Ancorar uma popover a uma coordenada LatLngAltitude

Quando uma popover é criada, ela não aparece automaticamente no mapa. Para que a popover fique visível, defina a opção open como true na PopoverElement. É possível realizar essa ação durante a construção ou após a instanciação.

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,
        gestureHandling: 'COOPERATIVE',
    });
    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

Ancorar uma popover a um marcador

É possível ancorar popovers a marcadores. Ao adicionar uma popover ancorada a um marcador, defina a opção PopoverElement.positionAnchor para usar o marcador.

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,
        gestureHandling: 'COOPERATIVE',
    });
    // 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

Ancorar uma popover a um marcador usando HTML

Também é possível ancorar popovers a marcadores sem escrever código JavaScript, conforme mostrado abaixo:

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

Adicionar conteúdo personalizado a uma popover

É possível adicionar conteúdo personalizado a popovers definindo as opções header e 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();