Эта страница переведена с помощью Cloud Translation API.

Добавление карты Google с маркерами с помощью HTML
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Введение

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

Начать

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

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

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

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

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

Перейдите в консоль Google Cloud .
Создайте или выберите проект.
Нажмите «Продолжить» , чтобы включить API и все связанные с ним службы.
На странице «Учетные данные» получите ключ API (и установите ограничения ключа API). Примечание: если у вас есть существующий неограниченный ключ API или ключ с ограничениями браузера, вы можете использовать этот ключ.
Чтобы предотвратить кражу квот и защитить свой ключ API, см. раздел Использование ключей API .
Включить выставление счетов. Для получения дополнительной информации см. раздел Использование и выставление счетов .
Теперь вы готовы использовать свой ключ 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

Добавление карты Google с маркерами с помощью HTML Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.