Pop-ups

Uma popover mostra conteúdo (geralmente texto ou imagens) em uma janela de diálogo acima do mapa, em um determinado local. O pop-up tem uma área de conteúdo e uma haste afunilada. A extremidade da haste fica conectada a um local especificado no mapa. Os pop-ups aparecem como uma caixa de diálogo para leitores de tela.

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

Adicionar um pop-up

O construtor PopoverElement usa um literal de objeto PopoverElementOptions, que especifica os parâmetros iniciais para exibir o pop-up.

O objeto literal PopoverElementOptions contém os seguintes campos:

  • positionAnchor: a posição LatLngAltitude em que o marcador será mostrado. Se você usar um marcador, a posição dele será usada.
  • altitudeMode: como a altitude do pop-up é interpretada.
  • lightDismissDisabled: se o pop-up permanece aberto quando o usuário clica fora dele ou pressiona a tecla Esc. Quando essa opção é definida como true, vários popovers lightDismissDisabled podem ser mostrados no mapa simultaneamente.
  • open: determina se o pop-up precisa estar aberto 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 ao PopoverElement explicitamente no slot header ou default.

Para dimensionar explicitamente o conteúdo, coloque em um elemento <div> e estilize o <div> com CSS. Os pop-ups podem ser rolados por padrão e têm uma altura máxima predefinida.

Ancorar um pop-up a uma coordenada LatLngAltitude

Quando você cria um popover, ele não aparece automaticamente no mapa. Para tornar o pop-up visível, defina a opção open como true no 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,
    });
    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

Fixar um popover a um marcador

É possível fixar pop-ups em marcadores. Ao adicionar um pop-up ancorado a um marcador, você define 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,
    });
    // 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

Fixar um pop-up em um marcador usando HTML

Também é possível ancorar pop-ups em marcadores sem escrever nenhum 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 um pop-up

É possível adicionar conteúdo personalizado a pop-ups 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();