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

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

Введение

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

Начать

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

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

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

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

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

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

Перейдите в консоль Google Cloud .
Создайте или выберите проект.
Нажмите «Продолжить» , чтобы включить 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="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>index.html

Приведённый выше код добавляет маркер на карту. Для использования расширенных маркеров требуется идентификатор карты (можно использовать 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>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></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>index.html