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

Введение

В этом руководстве рассказывается, как при помощи пользовательских элементов HTML добавить карту Google с маркером на веб-страницу. Ниже показана карта, которая будет использоваться в качестве примера. Маркер расположен в Оттумве, штат Айова.

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

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

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

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

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

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

Выполните следующие действия, чтобы получить ключ API.

  1. Войдите в консоль Google Cloud.

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

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

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

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

  6. Включите оплату. Посмотрите подробную информацию о модели оплаты.

  7. Теперь вы можете использовать ключ API.

Шаг 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?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
></script>

Поскольку страница HTML должна быть автономной, добавьте код CSS непосредственно на страницу:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

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

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

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

Карта будет отцентрирована по городу Оттумва, штат Айова, но на ней пока не будет маркера.

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

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

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

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

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

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

  • Можно настроить карту с помощью специальных стилей.
  • Пользуйтесь консолью инструментов разработчика в браузере, чтобы тестировать и запускать свой код, просматривать отчеты об ошибках и устранять проблемы.
  • Открыть консоль в 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>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>