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

Введение

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

Начать

Вот шаги, которые мы рассмотрим для создания карты Google с маркером с помощью HTML:

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

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

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

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

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

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

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

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

  4. На странице «Учётные данные» получите ключ 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 , содержащий загрузчик начальной загрузки для API JavaScript Карт, как показано в следующем фрагменте (добавьте свой собственный ключ API):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    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 Maps в браузере.
    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