Всплывающие окна

Объект popover служит для отображения текстового или графического содержания в диалоговом окне, которое открывается поверх карты в указанном местоположении. Всплывающее окно состоит из области контента и заостренного указателя. Конец указателя прикреплен к указанному местоположению на карте. Для программ чтения с экрана всплывающие окна считаются диалоговыми окнами.

Обычно всплывающее окно прикрепляется к интерактивному маркеру, но его также можно прикрепить к определенной координате LatLngAltitude или сместить относительно маркера.

Как добавить всплывающее окно

Конструктор PopoverElement принимает объектный литерал PopoverElementOptions, указывающий исходные параметры для отображения всплывающего окна.

Объектный литерал PopoverElementOptions содержит следующие поля:

  • positionAnchor – позиция LatLngAltitude, в которой нужно показать маркер. Если вы используете маркер, будет использовано его положение.
  • altitudeMode – как интерпретируется высота всплывающего окна.
  • lightDismissDisabled – остается ли всплывающее окно открытым, когда пользователь нажимает за его пределами или нажимает клавишу Esc. Если для этого параметра задано значение true, на карте может одновременно показываться несколько всплывающих окон lightDismissDisabled.
  • open: определяет, должно ли всплывающее окно быть открыто. Значение по умолчанию – false.

Объект PopoverElement может содержать текстовую строку, фрагмент кода HTML или элемент DOM. Контент задается путем явного добавления к параметру PopoverElement в слоте header или default.

Если вы хотите явно определить размер содержимого, поместите его в элемент <div> и примените к этому элементу <div> стиль CSS. По умолчанию всплывающие окна можно прокручивать, и у них есть заданная максимальная высота.

Как привязать всплывающее окно к координатам LatLngAltitude

Созданное всплывающее окно не отображается на карте автоматически. Чтобы всплывающее окно было видно, необходимо задать для параметра open значение true в PopoverElement. Это действие можно выполнить во время создания или после инициализации.

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

Как прикрепить всплывающее окно к маркеру

Всплывающие окна можно привязывать к маркерам. Чтобы привязать всплывающее окно к маркеру, задайте для свойства PopoverElement.positionAnchor значение, соответствующее маркеру.

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

Как привязать всплывающее окно к маркеру с помощью HTML

Вы также можете привязать всплывающие окна к маркерам, не используя код JavaScript, как показано ниже.

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

Как добавить собственный контент во всплывающее окно

Вы можете добавить собственный контент во всплывающие окна, задав параметры header и 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();