Все готово!

Прежде чем приступить к разработке, ознакомьтесь с документацией для разработчиков.

Активация Google Maps Embed API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps Embed API
  3. Создание соответствующих ключей

Google Maps Embed API

Обзор

Google Maps Embed API позволяет размещать на веб-сайтах интерактивную карту или панораму просмотра улиц с помощью обычного HTTP-запроса. Такую карту легко можно встроить в веб-страницу или блог, установив URL-адрес Google Maps Embed API в качестве атрибута src для встроенного фрейма:

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

Отдельная карта для каждого пользователя

Каждый посетитель вашего сайта будет видеть карту Google Maps, настроенную специально для него. Если он входит в систему, используя свою учетную запись Google, сохраненные им адреса мест, местоположения дома и работы , а также прочие сведения встраиваются непосредственно в отображаемую карту. Это также означает, что будут сохраняться его действия на карте, такие как отметка местоположения звездочкой, что упростит просмотр Google Maps как на стационарном компьютере, так и на мобильном устройстве.

Такие личные данные пользователя недоступны другим пользователям. Каждый посетитель видит карту, которая создана специально для него.

Карты с просто встраиваемым

Google Maps Embed API можно легко добавить на веб-страницу — просто укажите созданный вами URL-адрес в качестве значения атрибута src для встроенного фрейма. Для выбора размера карты используйте атрибуты height и width встроенного фрейма. JavaScript при этом не требуется.

Без ограничений на использование

Google Maps Embed API может использоваться без каких-либо ограничений. Вы можете размещать карты или панорамы Street View на своих веб-сайтах с большим количеством посещений, не опасаясь превысить ограничение числа использований или количества запросов в секунду.

Реклама на карте

Google Maps Embed API может содержать рекламу, размещаемую на карте. Формат рекламы и набор отображаемых объявлений для каждой отдельной карты могут изменяться без предварительного уведомления.

Создание URL-адреса

URL-адрес для запроса Google Maps Embed API имеет следующий вид:

https://www.google.com/maps/embed/v1/MODE?key=YOUR_API_KEY&parameters

Где:

  • {MODE} – это одно из следующих значений place, directions, search, view или streetview.
  • {YOUR_API_KEY} – ваш бесплатный ключ API.
  • parameters включают в себя дополнительные параметры, а также параметры, зависящие от режима работы.

Ключ API

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

Для начала работы с Google Maps Embed API нажмите кнопку ниже, после чего Google Maps Embed API будет активирован автоматически и получит ключ API.

Получение ключа

В качестве альтернативы выполните следующие действия, чтобы получить ключ API.

  1. Перейдите в Google API Console.
  2. Создайте или выберите проект.
  3. Нажмите Continue для активации API.
  4. На странице Учетные данные выберите Ключ API (и установите ограничения для ключа API).
    Примечание. Если у вас есть действующий ключ API без ограничений или ключ с ограничениями для браузера, можете использовать его.
  5. Рекомендуем вам обеспечить защиту ключа API, руководствуясь следующими практическими рекомендациям.


В Google API Console также можно выполнить поиск существующего ключа или просмотреть список включенных API.

Дополнительную информацию об использовании Google API Console см. в Справке API Console.

Типы ограничений для ключа API

Интерфейсы Google Maps API доступны для приложений Android и iOS, веб-браузеров, а также применяются веб-службами HTTP. Интерфейсы API на любой платформе могут использовать общий (без ограничений) ключ API. При необходимости в ключ API можно добавить ограничение (например, источник ссылки HTTP). После добавления ограничения ключ будет работать только на тех платформах, которые поддерживают ограничение этого типа. Дополнительная информация о ключах и учетных данных.

Режимы карты

Доступны четыре режима встраивания карт. Режим указывается в URL-адресе запроса.

Режим места

В режиме места (Place) на карте отображается отметка, установленная в определенном месте или по конкретному адресу, например, это может быть некий ориентир, компания, географический объект или город.

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

Следующий параметр URL-адреса является обязательным.

  • q указывает место, которое необходимо выделить на карте. Информацию о местоположения для него можно указывать либо как название места, либо как адрес или идентификатор места. Строка должна содержать символы преобразования URL, поэтому такой адрес как "City Hall, New York, NY" должен быть преобразован в City+Hall,New+York,NY. (При преобразовании пробелов Google Maps Embed API поддерживает использование как символов +, так и %20.) У идентификаторов мест должен быть префикс place_id:.

Сохранение с использованием атрибутов

Пользователь, который вошел в учетную запись Google, сможет сохранить место, указанное параметром q. Сохраненные места будут отображаться на других картах Google при их просмотре на веб-страницах или мобильных устройствах. По умолчанию места, сохраненные со встроенной карты, будут содержать информацию об атрибутах, чтобы напомнить пользователям, где они находились в момент сохранения этого места. Назначение атрибутов можно персонализировать с помощью следующих параметров.

  • attribution_source назначает сохраненному месту атрибут, связывающий его с вашим веб-сайтом или приложением. Необходимо включить настраиваемый параметр attribution_source перед установкой атрибутов attribution_web_url или attribution_ios_deep_link_id. По умолчанию назначается URL-адрес страницы, на которой отображается карта, например: https://example.com/path/
  • attribution_web_url указывает ссылку для возврата на ваш веб-сайт. Если параметр attribution_source не указан, attribution_web_url будет установлен по умолчанию для URL-адреса страницы, на которой отображается встроенная карта, например: https://example.com/path/page.html
  • attribution_ios_deep_link_id указывает схему URL-адреса, которая предоставляет прямую ссылку на приложение для iOS. При просмотре на Google Maps for iOS параметр attribution_ios_deep_link_id будет отображаться вместо параметра attribution_web_url.

Пример ниже показывает шпиль отеля Empress в Виктории (провинция Британская Колумбия, Канада). В результате сохранения этого местоположения в соответствующем атрибуте будет указано, что оно сохранено Google Maps Embed API. Присвоенный атрибут будет отображаться в виде URL-адреса. В примере используется схема URL-адреса Google Maps, чтобы указать маршрут проезда на устройствах iOS.

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Fairmont+Empress,Victoria+BC
  &attribution_source=Google+Maps+Embed+API
  &attribution_web_url=http://www.fairmont.com/empress-victoria/
  &attribution_ios_deep_link_id=comgooglemaps://?daddr=Fairmont+Empress,+Victoria,+BC

Режим маршрутов

В режиме маршрутов (Directions) показывается путь между двумя или несколькими выбранными точками на карте, а также расстояние между ними и время поездки.

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

Следующие параметры URL-адреса являются обязательными.

  • origin указывает начальную точку маршрута. Этим значением может быть либо название места, либо адрес или идентификатор места. Строка должна содержать символы преобразования URL, чтобы адрес, подобный "City Hall, New York, NY" преобразовывался в City+Hall,New+York,NY. (При преобразовании пробелов Google Maps Embed API поддерживает использование как символов +, так и %20.) У идентификаторов мест должен быть префикс place_id:.
  • destination указывает конечную точку маршрута.

Следующие параметры URL-адреса являются необязательными.

  • waypoints указывает одно или несколько промежуточных мест на маршруте между начальной и конечной точками. Чтобы указать несколько промежуточных точек, их нужно разделить вертикальной чертой (|) (например, Berlin,Germany|Paris,France). Можно указать до 20 промежуточных точек. Каждой конечной точкой может быть либо название места, либо адрес или идентификатор места.
  • mode указывает способ передвижения. Варианты: driving, walking (при этом предпочтение отдается пешеходным дорожкам и тротуарам, где они есть), bicycling (предпочтение отдается велосипедным дорожкам и улицам, где они есть), transit или flying. Если режим передвижения не указан, Google Maps Embed API отобразит один или несколько наиболее подходящих режимов для указанного маршрута.
  • avoid сообщает Google Maps, что необходимо избегать платных дорог (tolls), паромных переправ (ferries) и скоростных магистралей (highways). Несколько значений разделяются вертикальной чертой (например, avoid=tolls|highways). Обратите внимание, что это не исключает маршруты, содержащие ограничиваемые варианты передвижения, а просто позволяет менять результат на более предпочтительный.
  • units указывает единицы измерений для расстояний в результатах либо в метрической (metric), либо в британской (imperial) системах. Если параметр units не указан, будут использоваться те единицы измерения, которые соответствуют стране, указанной в параметре origin.

Режим поиска

В режиме поиска (Search) предоставляются результаты поиска для отображаемого на карте региона. Рекомендуется обозначить местоположение для поиска, либо включив его в поисковый запрос (record+stores+in+Seattle), либо добавив параметры center и zoom, чтобы выполнить привязку поиска.

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

Следующий параметр URL-адреса является обязательным.

  • q указывает поисковый запрос. Он может включать в себя ограничения по географическим признакам, например, in+Seattle или near+98033.

Режим просмотра

В режиме просмотра (View) карта отображается без каких-либо маркеров или маршрутов.

Пример ниже использует необязательный параметр maptype, чтобы показать снимок карты со спутника.

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Следующий параметр URL-адреса является обязательным.

  • center определяет центральную часть окна карты, задается значениями широты и долготы, разделяемыми запятой (-33.8569,151.2152).

Дополнительные параметры

С любым из перечисленных выше режимов карты можно использовать следующие дополнительные параметры.

  • center определяет центральную часть представления карты. Задается значениями широты и долготы, разделяемыми запятой (например, 37.4218,-122.0840).

  • zoom устанавливает начальный уровень масштабирования карты. Допускаются значения в диапазоне от 0 (весь мир) до 21 (отдельные здания). Верхний предел может разниться в зависимости от данных карты, доступных для выбранного местоположения.

  • maptype может быть либо дорожной картой (roadmap, по умолчанию), либо спутниковой картой (satellite) и определяет тип листов карты для загрузки.

  • language определяет язык, используемый для элементов пользовательского интерфейса, а также для отображения меток на листах карты. Обратите внимание, что этот параметр поддерживается для листов карт только некоторых стран; если для определенного набора листов тот или иной язык не поддерживается, для него будет использован язык, установленный по умолчанию. По умолчанию пользователям отображается карта на их родном языке.

  • region определяет соответствующие границы и метки для отображения исходя из геополитической информации. Можно передать код региона, указанный как значение из двух символов ccTLD (домен верхнего уровня).

Параметры идентификатора места

Google Maps Embed API поддерживает использование идентификаторов места вместо предоставления названия или адреса места. Идентификаторы мест представляют собой надежный способ уникальным образом указать какое-то место. Дополнительную информацию о поиске и использовании идентификаторов мест см. в документации к Google Places API.

Google Maps Embed API принимает идентификаторы мест для следующих параметров URL:

  • q

  • origin

  • destination

  • waypoints

Чтобы использовать идентификатор места, необходимо сначала добавить префикс place_id:. Следующий код указывает ратушу Нью-Йорка (New York City Hall) в качества исходной точки для маршрутов request: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

Режим Street View

Google Maps Embed API позволяет отображать изображения службы Google Street View на веб-сайте или в блоге в виде интерактивных панорам. Google Street View предоставляет панорамы из указанных мест в пределах своей области покрытия. Также доступны пользовательские сферические панорамы, и специальные коллекции просмотров улиц.

Каждая панорама просмотра улиц обеспечивает полный круговой обзор из одной точки. Изображения содержат 360-градусный горизонтальный обзор (вокруг точки) и 180-градусный вертикальный обзор (от максимально верхней точки до максимально нижней). Режим просмотра улиц (streetview) обеспечивает средство просмотра, которое представляет полученную панораму в виде сферы с камерой в центре. Вы можете управлять камерой, выбирая для нее масштаб и положение.

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

Один из следующих параметров URL-адреса является обязательным.

  • location принимает значения широты и долготы, разделяемые запятой (46.414382,10.013988). API отобразит панораму, снятую максимально близко к этому месту. Поскольку изображения панорам просмотра улиц периодически обновляются, а фотографии могут быть сделаны каждый раз из немного разных позиций, есть вероятность, что при обновлении изображений необходимое вам место может быть прикреплено к другой панораме.

  • pano является идентификатором определенной панорамы. Вместе с параметром pano следует также использовать параметр location. location может использоваться только в том случае, если API-интерфейсу не удается найти идентификатор панорамы.

Следующие параметры URL-адреса являются необязательными.

  • heading указывает направление компаса камеры в градусах по часовой стрелке от направления на север. Допустимые значения от -180° до 360°.

  • pitch указывает угол наклона (вниз или вверх) для камеры. pitch указывается в градусах от -90° до 90°. При положительных значениях параметра камера будет поворачиваться вверх, а при отрицательных значениях – наклоняться вниз. По умолчанию устанавливается наклон 0°, учитывая положение камеры в тот момент, когда был сделан снимок. По этой причине наклон 0° часто (хотя не всегда) соответствует горизонтальному положению камеры. Например, при съемке панорамы с холма, скорее всего, будет наклон по умолчанию, потому что съемка производится не в горизонтальном положении камеры.

  • fov определяет горизонтальное поле обзора для изображения. Поле обзора задается в градусах в диапазоне от 10° до 100°. По умолчанию установлено значение 90°. Если используется область просмотра с фиксированным размером, то поле обзора можно считать уровнем масштабирования, меньшие значения угла обзора обеспечивают более высокий уровень масштабирования.

  • language определяет язык, используемый для элементов пользовательского интерфейса и меток. По умолчанию пользователям отображаются элементы интерфейса на их родном языке.

  • region определяет соответствующие границы и метки для отображения исходя из геополитической информации. Можно передать код региона, указанный как значение из двух символов ccTLD (домен верхнего уровня).

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

Чтобы использовать Google Maps Embed API на своей веб-странице, укажите созданный вами URL-адрес в качестве значения атрибута для src атрибута встроенного фрейма. Для выбора размера карты используйте атрибуты встроенного фрейма height и width.

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&q=record+stores+in+Seattle" allowfullscreen>
</iframe>

Совет. Добавьте параметр allowfullscreen в свойства своего встроенного фрейма, чтобы разрешить отображение определенных частей карты в полноэкранном режиме. Совет. При добавлении свойств frameborder="0" и style="border:0" удаляется стандартная граница встроенного фрейма вокруг карты.

Вы можете изменить размеры встроенного фрейма в соответствии со структурой и дизайном своего веб-сайта, но мы считаем, что пользователям, как правило, удобнее работать с картами большего размера. Обратите внимание, что встроенные карты не поддерживаются для фреймов с размером меньше 200 пикселей по вертикали или горизонтали.

Оставить отзыв о...

Текущей странице
Google Maps Embed API
Google Maps Embed API
Нужна помощь? Обратитесь в службу поддержки.