Краткое руководство по Maps Embed API

Разместите на веб-странице интерактивную карту или панораму в Просмотре улиц с помощью HTTP-запроса. Пользовательский код JavaScript не требуется.

Расходы

Все запросы к Maps Embed API обрабатываются бесплатно и без ограничений. Однако для всех запросов по-прежнему требуется действительный ключ Google Cloud API. Подробнее об использовании и оплате…

Подготовка

Чтобы создать встроенную карту на веб-странице, выполните следующие действия:

Шаг 1. Настройте проект

Консоль

  1. Перейдите на страницу выбора проекта в консоли Google Cloud и нажмите Create Project (Создать проект).

    Перейти на страницу выбора проекта

  2. Убедитесь, что для проекта Google Cloud включены платежные функции.

    Мы предлагаем бесплатный пробный период для использования Google Cloud. Он длится 90 дней или пока сумма расходов не достигнет 300 долл. США в зависимости от того, что произойдет раньше. Отказаться от предложения можно в любое время. Ознакомьтесь с информацией о бонусах в платежных аккаунтах и об оплате.

Cloud SDK

gcloud projects create "PROJECT"

Прочитайте статьи о Google Cloud SDK, установке Cloud SDK и следующих командах:

Шаг 2. Включите API или SDK

Для работы с платформой Google Карт вам потребуется включить API и SDK, которые будут использоваться в проекте.

Консоль

Включить Maps Embed API

Cloud SDK

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

Прочитайте статьи о Google Cloud SDK, установке Cloud SDK и следующих командах:

3. Получите ключ API

На этом шаге рассматривается только создание ключа API. Если у вас есть собственный ключ API, мы настоятельно рекомендуем настроить для него ограничения. Подробная информация приводится в разделе Использование ключей API.

Ключ API – это уникальный идентификатор, который используется для аутентификации запросов, связанных с вашим проектом. Он нужен для учета использования API и оплаты. С вашим проектом должен быть связан хотя бы один ключ API. Чтобы создать ключ или добавить API или SDK к существующему ключу, следуйте инструкциям ниже.

Консоль

  1. Откройте страницу Google Maps Platform > Keys & Credentials (Платформа Google Карт > Ключи и учетные данные).

    Перейти на страницу "Ключи и учетные данные"

  2. Если появится запрос, выберите проект.

  3. Выполните одно из следующих действий:

    • Создайте ключ.

      1. Нажмите Создать учетные данные > Ключ API.
      2. На панели Create API key (Создать ключ API) откройте список Select API restrictions (Выбрать ограничения API).
      3. Удалите все API, которые не нужны для этого ключа, и убедитесь, что выбран Maps Embed API.
      4. Нажмите Создать. На панели появится новый ключ API.

    • Использовать существующий ключ:

      1. Нажмите на название ключа.
      2. В списке Select API restrictions (Выбрать ограничения API) выберите Maps Embed API.
      3. Нажмите Сохранить.

    Выбор API не означает его включение. Убедитесь, что Maps Embed API включен на странице библиотеки API.

  4. Чтобы посмотреть строку ключа позже, перейдите на страницу Ключи и учетные данные и нажмите Показать ключ.

Если консоль выглядит иначе, чем описано в этих шагах, ознакомьтесь с разделами Создание ключа API и Добавление ограничений API в документации Google Cloud.

Cloud SDK

В следующих командах замените PROJECT_ID идентификатором своего проекта.

  • Создайте новый ключ. Выполните следующую команду, заменив DISPLAY_NAME на название ключа. 

    gcloud services api-keys create \
    --project="PROJECT_ID" \
    --display-name="DISPLAY_NAME" \
    --api-target=service=maps-embed-backend.googleapis.com

    Прочитайте статьи о Google Cloud SDK, установке Cloud SDK и следующих командах:

  • Использовать существующий ключ. Выполните следующую команду, заменив KEY_ID идентификатором ключа. Флаг --append сохраняет API, которые уже разрешены ключом. Если его не указать, команда заменит их.

    gcloud services api-keys update KEY_ID \
    --project="PROJECT_ID" \
    --append \
    --api-target=service=maps-embed-backend.googleapis.com

    Прочитайте статьи о Google Cloud SDK, установке Cloud SDK и следующих командах:

    Идентификатор ключа – это не строка ключа и не отображаемое название. Чтобы найти его, выполните команду gcloud services api-keys list --project="PROJECT_ID". Идентификатор – это последняя часть поля name: projects/PROJECT_NUMBER/locations/global/keys/KEY_ID.

Чтобы посмотреть строку ключа, выполните команду gcloud services api-keys get-key-string KEY_ID --project="PROJECT_ID".

Создание iframe

Нажмите на следующие параметры и добавьте местоположение и ключ API, чтобы создать окно iframe для своей веб-страницы. Дополнительные параметры и настройки описаны в разделе Встраивание карты.

Как протестировать iframe

Чтобы посмотреть окно iframe в окне браузера HTML:

  1. Откройте текстовый редактор, установленный по умолчанию. На вашем устройстве по умолчанию должны быть установлены текстовые редакторы, такие как TextEdit или Блокнот.
  2. Создайте HTML-файл и назовите его index.html.

  3. Добавьте следующий код с тегом iframe, который вы создали выше:

    <html>
  <!-- Replace this code comment with your iframe. -->
</html>

  4. Сохраните HTML-файл index.html.

  5. Загрузите файл HTML в веб-браузер, перетянув его туда со своего компьютера, или просто откройте файл в браузере, нажав дважды. Этот способ работает в большинстве операционных систем.

Поздравляем! Вы настроили и создали карту с помощью Maps Embed API.

Очистка

Вы можете удалить проект Google Cloud, чтобы прекратить оплату всех ресурсов, используемых в нем.

  1. В консоли Google Cloud перейдите на страницу Управление ресурсами.

    Открыть страницу "Управление ресурсами"

  2. Если проект, который вы хотите удалить, связан с организацией, выберите и разверните список организаций в верхней части страницы.
  3. В списке проектов выберите проект, который нужно удалить, и нажмите Удалить.
  4. В диалоговом окне введите идентификатор проекта и нажмите Shut down (Отключить), чтобы удалить проект.

Дальнейшие действия

  • Чтобы начать разработку с Maps Embed API, настройте облачный проект Google Cloud:

    Настройка в Cloud Console

  • Список дополнительных параметров и настроек, которые можно добавить в iframe:

    Встраивание карт

  • Расширьте возможности своего проекта Google Карт с помощью JavaScript API:

    Maps JavaScript API