Добавление карты 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). Примечание: Если у вас уже есть неограниченный ключ 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 , содержащий загрузчик Bootstrap для JavaScript API карт, как показано в следующем фрагменте кода (добавьте свой собственный ключ API):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></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
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></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>
index.html

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

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

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

  • Вы можете настроить карту, добавив собственные стили .
  • Используйте консоль инструментов разработчика в веб-браузере, чтобы тестировать и запускать свой код, читать отчеты об ошибках и решать проблемы с кодом.
  • Для открытия консоли в Chrome используйте следующие сочетания клавиш:
    На Mac это комбинация клавиш Command+Option+J, а на Windows — Control+Shift+J.

  • Выполните следующие шаги, чтобы получить координаты широты и долготы местоположения на Google Maps.

    1. Откройте Google Maps в браузере.
    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
            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