Веб-компоненты в Maps JavaScript API (предварительная версия)

Web Components – это популярный стандарт W3C, который позволяет объединять протокол HTML, стили CSS и язык программирования JS в пользовательских элементах HTML, которые можно использовать многократно. Это могут быть крошечные компоненты для конкретной функции, например для показа рейтинга мест, или достаточно сложные фрагменты бизнес-логики. В этом руководстве описаны веб-компоненты, которые доступны в Maps JavaScript API.

Подробные сведения о стандарте можно найти на этой странице.

Аудитория

Эта документация поможет вам быстро изучить веб-компоненты и начать разработку с их использованием. Предполагается, что вы уже знакомы с концепциями использования HTML и CSS.

Отображение карты

Изучение веб-компонентов лучше начать с простого примера. Ниже вы видите код, который показывает карту района Сан-Хосе.

Карта района Сан-Хосе

HTML

<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

В этом примере есть несколько моментов, на которые нужно обратить внимание:

  1. Здесь выполняется асинхронный вызов Maps JavaScript API. Функция обратного вызова позволяет узнать, когда будет получен ответ от API.
  2. Представление карты определяется настраиваемым элементом <gmp-map>.
  3. Свойства карты определяются атрибутами в настраиваемом элементе <gmp-map>.
  4. Стили можно указывать прямо в коде настраиваемых элементов или объявлять в отдельном CSS-файле.

Как настроить стили для базовой карты

Идентификатор карты связан с определенным стилем карты или функцией. Чтобы использовать расширенные возможности конфигурации, замените облачный стиль карты DEMO_MAP_ID собственным идентификатором карты. Узнайте, как создать идентификатор карты и настроить собственный стиль.

Как добавить маркеры к карте

Так же, как и вложенные теги HTML позволяют создавать сложные иерархии контента, размещенные внутри элементов теги <gmp-advanced-marker> позволяют определять маркеры.

Карта с маркерами

HTML

<html>
  <head>
    <title>Simple Map with Markers</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
      <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
      <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
    </gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

Здесь мы добавили два элемента <gmp-advanced-marker> в пользовательский элемент <gmp-map>. Текст для title определяет информацию, которая появляется при наведении курсора, и метку доступности для указанного элемента.

События JavaScript

Важное преимущество веб-компонентов – простота использования. Всего несколько строк кода позволяют создать карту, не изучая языка JavaScript или сложных методов программирования. Этот код полностью соответствует привычному формату обычных элементов HTML. Например, вы можете использовать встроенную в браузер систему обработки событий, чтобы реагировать на действия (например, клики) с картами и расширенными маркерами.

Событие клика маркера

HTML

<html>
<head>
  <title>Google Maps - Marker Click Example</title>
  <link rel="stylesheet" href="style.css" type="text/css">

  <script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
  </script>

  <script>
    function initMap() {
      console.log('Maps JavaScript API loaded.');

      const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker");
      for (const advancedMarker of advancedMarkers) {
        customElements.whenDefined(advancedMarker.localName).then(async () => {
          advancedMarker.addEventListener('gmp-click', async () => {
            const {InfoWindow} = await google.maps.importLibrary("maps");
            const infoWindow = new InfoWindow({
              content: advancedMarker.title
            });
            infoWindow.open({
              anchor: advancedMarker
            });
          });
        });
      }
    }
  </script>
</head>
<body>

<gmp-map id="marker-click-event-example" center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
  <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>
  <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>
</gmp-map>

</body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

В примере выше initMap представляет собой функцию обратного вызова, которая выполняется после завершения загрузки Maps JavaScript API. Этот код создает для каждого маркера прослушиватели, которые выводят информационное окно при нажатии на определенный маркер.

Что дальше