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

Введение

В этом руководстве рассказывается, как при помощи HTML добавить карту Google с маркером на веб-страницу. Ниже показана карта, которая будет использоваться в качестве примера. Маркеров будет два: один для города Маунтин-Вью (Mountain View, CA), а другой для Сиэтла (Seattle, WA).

Начало работы

Порядок действий, посредством которых мы создадим карту Google с маркерами при помощи HTML, будет таким:

  1. Получение ключа API
  2. Создание файлов HTML, CSS и JS
  3. Добавление карты
  4. Добавление маркера

Для работы потребуется браузер. Рекомендуем использовать Google Chrome, но подойдет и любой другой популярный браузер (Firefox, Safari, Edge) для вашей платформы из списка поддерживаемых браузеров.

Шаг 1. Получите ключ API

В этом разделе объясняется, как выполнить аутентификацию приложения в Maps JavaScript API с помощью собственного ключа API.

Вот что нужно сделать:

  1. Войдите в Google Cloud Console.

  2. Создайте или выберите проект.

  3. Нажмите Continue (Продолжить) для активации API и всех связанных сервисов.

  4. На странице Credentials (Учетные данные) получите ключ API и задайте для него ограничения. Если у вас есть действующий ключ API без ограничений или ключ с ограничениями для браузера, можете использовать его.

  5. Узнайте, как защитить доступные ресурсы от посторонних и обезопасить ключ API.

  6. Включите оплату. Ознакомьтесь со сведениями о моделях оплаты.

  7. Получив ключ API, добавьте его в следующий фрагмент, нажав "YOUR_API_KEY". Скопируйте и вставьте тег скрипта встроенного загрузчика, чтобы использовать его на собственной веб-странице.

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>

Шаг 2: Создайте файлы HTML, CSS и JS

Ниже приведен код HTML простейшей веб-страницы.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

Чтобы загрузить карту, нужно добавить тег script встроенного загрузчика для Maps JavaScript API, как показано в следующем фрагменте (добавьте собственный ключ API):

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

Внимание, спойлер! Попробуйте запустить готовый пример в JSFiddle.

Шаг 3. Добавьте карту

Чтобы добавить на страницу карту Google, скопируйте элемент HTML gmp-map и вставьте его в элемент body страницы HTML:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

В результате получится такая карта:

В центре ее – метрополия Сан Хосе.

Шаг 4. Добавьте маркер

Чтобы добавить на карту маркер, используйте элемент HTML gmp-advanced-marker. Скопируйте следующий фрагмент и вставьте его в элемент gmp-map, добавленный на предыдущем шаге.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <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>
index.html

Приведенный выше код добавляет два маркера и, чтобы лучше их отобразить, изменяет в gmp-map параметры zoom и center. Чтобы использовать расширенные маркеры, потребуется идентификатор карты (подойдет DEMO_MAP_ID).

Советы и устранение неполадок

  • Можно настроить карту с помощью специальных стилей.
  • Пользуйтесь консолью инструментов разработчика в браузере, чтобы тестировать и запускать свой код, просматривать отчеты об ошибках и устранять проблемы.
  • Открыть консоль в Chrome можно сочетанием клавиш:
    Command + Option + J (Mac) или Control + Shift + J (Windows).

  • Чтобы получить географические координаты (широту и долготу) точки на Google Картах:

    1. Откройте Google Карты в браузере.
    2. Нажмите правой кнопкой мыши на точку, координаты которой хотите получить.
    3. В появившемся контекстном меню выберите Что здесь. Появится карточка в нижней части экрана, в последней строке которой записаны значения широты и долготы.

  • Преобразовать адрес в географические координаты можно с помощью сервиса геокодирования. Узнайте, как начать работу с этим сервисом.

Полный пример кода

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

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <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>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html