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

Введение

В этом руководстве показано, как добавить карту Google с маркером на веб-страницу с помощью HTML. Вот карта, которую вы создадите с помощью этого урока. Расположены два маркера: один в Маунтин-Вью, штат Калифорния, и один в Сиэтле, штат Вашингтон.

Начать

Ниже приведены шаги, которые мы рассмотрим для создания карты Google с маркером с использованием HTML:

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

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

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

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

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

  1. Перейдите в облачную консоль Google .

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

  3. Нажмите «Продолжить» , чтобы включить API и все связанные службы.

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

  5. Чтобы предотвратить кражу квот и защитить ключ API, см. Использование ключей 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
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker&v=beta"
    defer
></script>

Спойлер: попробуйте готовый пример на 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

Приведенный выше код добавляет два маркера и изменяет параметры zoom и center на gmp-map чтобы эти маркеры лучше отображались. Для использования расширенных маркеров требуется идентификатор карты (можно использовать 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>

    <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 script 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&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html