Поповеры

popover отображает контент (обычно текст или изображения) в диалоговом окне над картой, в заданном месте. Всплывающее окно имеет область контента и сужающийся стержень. Вершина стержня прикреплена к указанному месту на карте. Всплывающие окна отображаются как диалоговое окно для программ чтения с экрана.

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

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

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

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

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

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

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

Привяжите всплывающее окно к координатам широты, долготы и высоты.

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

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

Привяжите всплывающее окно к маркеру

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

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

Привяжите всплывающее окно к маркеру с помощью 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();