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

В этом руководстве показано, как встроить интерактивную карту на веб-страницу.

Создание URL Maps Embed API

Ниже приведен пример URL-адреса, который загружает Maps Embed API:

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

Заменять:

• MAP_MODE с вашим режимом карты .
• YOUR_API_KEY с вашим ключом API. Дополнительные сведения см. в разделе Получение ключа API .
• PARAMETERS с обязательными и дополнительными параметрами для вашего режима карты.

Добавление URL в iframe

Чтобы использовать Maps Embed API на своей веб-странице, задайте созданный вами URL-адрес в качестве значения атрибута src iframe. Управляйте размером карты с помощью атрибутов height и width iframe, например:

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

Пример iframe выше использует дополнительные свойства:

• Свойство allowfullscreen , позволяющее отображать определенные части карты в полноэкранном режиме.
• frameborder="0" и style="border:0" для удаления стандартной границы iframe со всей карты.
• Свойство referrerpolicy="no-referrer-when-downgrade" , позволяющее браузеру отправлять полный URL-адрес в качестве заголовка Referer с запросом, чтобы ограничения ключа API могли работать правильно.

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

Ограничения по ключу API

Если на хостинговом веб-сайте метатег referrer имеет значение no-referrer или same-origin , браузер не будет отправлять заголовок Referer в Google. Это может привести к тому, что ограничения вашего ключа API будут отклонять запросы. Чтобы ограничение работало правильно, добавьте в iframe свойство referrerpolicy , как в примере выше, чтобы явно разрешить отправку заголовков Referer в Google.

Объявления на карте

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

Выбор режимов карты

Вы можете указать один из следующих режимов карты для использования в URL-адресе вашего запроса:

• place : отображает булавку на карте в определенном месте или адресе, таком как достопримечательность, предприятие, географический объект или город.
• view : возвращает карту без маркеров и направлений.
• directions : отображает путь между двумя или более указанными точками на карте, а также расстояние и время в пути.
• streetview : показывает интерактивные панорамные виды из определенных мест.
• search : показывает результаты поиска в видимой области карты.

режим place

В следующем URL-адресе используется режим карты place для отображения маркера карты на Эйфелевой башне:

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

Вы можете использовать следующие параметры:

Параметр	Тип	Описание	Допустимые значения
q	Необходимый	Определяет местоположение маркера карты.	Название места с экранированием URL, адрес, плюс код или идентификатор места . Maps Embed API поддерживает как + , так и %20 при экранировании пробелов. Например, преобразуйте "City Hall, New York, NY" в City+Hall,New+York,NY или плюс-коды "849VCWC8+R9" в 849VCWC8%2BR9 .
center	По желанию	Определяет центр вида карты.	Принимает значения широты и долготы, разделенные запятыми; например: 37.4218,-122.0840 .
zoom	По желанию	Устанавливает начальный уровень масштабирования карты.	Значения от 0 (весь мир) до 21 (отдельные здания). Верхний предел может варьироваться в зависимости от картографических данных, доступных в выбранном местоположении.
maptype	По желанию	Определяет тип тайлов карты для загрузки.	roadmap (по умолчанию) или satellite
language	По желанию	Определяет язык, используемый для элементов пользовательского интерфейса и для отображения надписей на фрагментах карты. По умолчанию посетители увидят карту на своем родном языке. Этот параметр поддерживается только для плиток некоторых стран; если определенный запрошенный язык не поддерживается для набора плиток, то будет использоваться язык по умолчанию для этого набора плиток.
region	По желанию	Определяет соответствующие границы и метки для отображения в зависимости от геополитических особенностей.	Принимает код региона, указанный как двухсимвольный (нечисловой) вложенный тег региона Unicode, сопоставленный с привычными двухсимвольными значениями ccTLD («домен верхнего уровня»). См. сведения о покрытии платформы Google Maps для поддерживаемых регионов.

режим view

В следующем примере используется режим view и необязательный параметр maptype для отображения вида карты со спутника:

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

Вы можете использовать следующие параметры:

Параметр	Тип	Описание	Допустимые значения
center	Необходимый	Определяет центр вида карты.	Принимает значения широты и долготы, разделенные запятыми; например: 37.4218,-122.0840 .
zoom	По желанию	Устанавливает начальный уровень масштабирования карты.	Значения от 0 (весь мир) до 21 (отдельные здания). Верхний предел может варьироваться в зависимости от картографических данных, доступных в выбранном местоположении.
maptype	По желанию	Определяет тип тайлов карты для загрузки.	roadmap (по умолчанию) или satellite
language	По желанию	Определяет язык, используемый для элементов пользовательского интерфейса и для отображения надписей на фрагментах карты. По умолчанию посетители увидят карту на своем родном языке. Этот параметр поддерживается только для плиток некоторых стран; если определенный запрошенный язык не поддерживается для набора плиток, то будет использоваться язык по умолчанию для этого набора плиток.
region	По желанию	Определяет соответствующие границы и метки для отображения в зависимости от геополитических особенностей.	Принимает код региона, указанный как двухсимвольный (нечисловой) вложенный тег региона Unicode, сопоставленный с привычными двухсимвольными значениями ccTLD («домен верхнего уровня»). См. сведения о покрытии платформы Google Maps для поддерживаемых регионов.

режим directions

В следующем примере режим маршрутов используется для отображения directions между Ослоу и Телемарком, Норвегия, расстояния и времени в пути без платных дорог и автомагистралей.

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

Вы можете использовать следующие параметры:

Параметр	Тип	Описание	Допустимые значения
origin	Необходимый	Определяет начальную точку, от которой следует отображать направления.	Название места, адрес, плюс код, координаты широты/долготы или идентификатор места . Maps Embed API поддерживает как + , так и %20 при экранировании пробелов. Например, преобразуйте "City Hall, New York, NY" в City+Hall,New+York,NY или плюс-коды "849VCWC8+R9" в 849VCWC8%2BR9 .
destination	Необходимый	Определяет конечную точку направлений.	Название места, адрес, плюс код, координаты широты/долготы или идентификатор места . Maps Embed API поддерживает как + , так и %20 при экранировании пробелов. Например, преобразуйте "City Hall, New York, NY" в City+Hall,New+York,NY или плюс-коды "849VCWC8+R9" в 849VCWC8%2BR9 .
waypoints	По желанию	Задает одно или несколько промежуточных мест для маршрутизации направлений между исходной и конечной точками.	Название места, адрес или идентификатор места . Можно указать несколько путевых точек, используя символ вертикальной черты (|) для разделения мест (например Berlin,Germany|Paris,France ). Вы можете указать до 20 путевых точек.
mode	По желанию	Определяет способ передвижения. Если режим не указан, Maps Embed API покажет один или несколько наиболее подходящих режимов для указанного маршрута.	driving , walking (предпочтение пешеходных дорожек и тротуаров, если таковые имеются), езда на bicycling (пути по велосипедным дорожкам и предпочтительным улицам, если таковые имеются), transit или flying .
avoid	По желанию	Указывает объекты, которых следует избегать в направлениях. Обратите внимание, что это не исключает маршрутов, которые включают ограниченные функции; это смещает результат в сторону более благоприятных маршрутов.	tolls , ferries и/или highways . Разделяйте несколько значений вертикальной чертой (например, avoid=tolls|highways ).
units	По желанию	Указывает метод измерения, метрический или имперский, при отображении расстояний в результатах. Если units не указаны, используемые единицы определяются страной origin запроса.	metric или imperial
center	По желанию	Определяет центр вида карты.	Принимает значения широты и долготы, разделенные запятыми; например: 37.4218,-122.0840 .
zoom	По желанию	Устанавливает начальный уровень масштабирования карты.	Значения от 0 (весь мир) до 21 (отдельные здания). Верхний предел может варьироваться в зависимости от картографических данных, доступных в выбранном местоположении.
maptype	По желанию	Определяет тип тайлов карты для загрузки.	roadmap (по умолчанию) или satellite
language	По желанию	Определяет язык, используемый для элементов пользовательского интерфейса и для отображения надписей на фрагментах карты. По умолчанию посетители увидят карту на своем родном языке. Этот параметр поддерживается только для плиток некоторых стран; если определенный запрошенный язык не поддерживается для набора плиток, то будет использоваться язык по умолчанию для этого набора плиток.
region	По желанию	Определяет соответствующие границы и метки для отображения в зависимости от геополитических особенностей.	Принимает код региона, указанный как двухсимвольный (нечисловой) вложенный тег региона Unicode, сопоставленный с привычными двухсимвольными значениями ccTLD («домен верхнего уровня»). См. сведения о покрытии платформы Google Maps для поддерживаемых регионов.

режим streetview

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

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

См. следующую 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	По желанию	определяет угол, вверх или вниз, камеры. Положительные значения будут наклонять камеру вверх, в то время как отрицательные значения будут наклонять камеру вниз. Шаг по умолчанию, равный 0°, устанавливается в зависимости от положения камеры в момент захвата изображения. Из-за этого шаг 0 ° часто, но не всегда, является горизонтальным. Например, изображение, снятое на холме, скорее всего, будет иметь шаг по умолчанию, который не является горизонтальным.	Значение в градусах от -90° до 90°
fov	По желанию	определяет горизонтальное поле зрения изображения. По умолчанию он равен 90°. При работе с окном просмотра фиксированного размера поле зрения можно рассматривать как уровень масштабирования, при этом меньшие числа указывают на более высокий уровень масштабирования.	Значение в градусах в диапазоне от 10° до 100°
center	По желанию	Определяет центр вида карты.	Принимает значения широты и долготы, разделенные запятыми; например: 37.4218,-122.0840 .
zoom	По желанию	Устанавливает начальный уровень масштабирования карты.	Значения от 0 (весь мир) до 21 (отдельные здания). Верхний предел может варьироваться в зависимости от картографических данных, доступных в выбранном местоположении.
maptype	По желанию	Определяет тип тайлов карты для загрузки.	roadmap (по умолчанию) или satellite
language	По желанию	Определяет язык, используемый для элементов пользовательского интерфейса и для отображения надписей на фрагментах карты. По умолчанию посетители увидят карту на своем родном языке. Этот параметр поддерживается только для плиток некоторых стран; если определенный запрошенный язык не поддерживается для набора плиток, то будет использоваться язык по умолчанию для этого набора плиток.
region	По желанию	Определяет соответствующие границы и метки для отображения в зависимости от геополитических особенностей.	Принимает код региона, указанный как двухсимвольный (нечисловой) вложенный тег региона Unicode, сопоставленный с привычными двухсимвольными значениями ccTLD («домен верхнего уровня»). См. сведения о покрытии платформы Google Maps для поддерживаемых регионов.

режим search

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

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

Вы можете использовать следующие параметры:

Параметр	Тип	Описание	Допустимые значения
q	Необходимый	Определяет поисковый запрос.	Он может включать географическое ограничение, например in+Seattle или near+98033 .
center	По желанию	Определяет центр вида карты.	Принимает значения широты и долготы, разделенные запятыми; например: 37.4218,-122.0840 .
zoom	По желанию	Устанавливает начальный уровень масштабирования карты.	Значения от 0 (весь мир) до 21 (отдельные здания). Верхний предел может варьироваться в зависимости от картографических данных, доступных в выбранном местоположении.
maptype	По желанию	Определяет тип тайлов карты для загрузки.	roadmap (по умолчанию) или satellite
language	По желанию	Определяет язык, используемый для элементов пользовательского интерфейса и для отображения надписей на фрагментах карты. По умолчанию посетители увидят карту на своем родном языке. Этот параметр поддерживается только для плиток некоторых стран; если определенный запрошенный язык не поддерживается для набора плиток, то будет использоваться язык по умолчанию для этого набора плиток.
region	По желанию	Определяет соответствующие границы и метки для отображения в зависимости от геополитических особенностей.	Принимает код региона, указанный как двухсимвольный (нечисловой) вложенный тег региона Unicode, сопоставленный с привычными двухсимвольными значениями ccTLD («домен верхнего уровня»). См. сведения о покрытии платформы Google Maps для поддерживаемых регионов.

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

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

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

• q
• origin
• destination
• waypoints

Чтобы использовать идентификатор места, вы должны сначала добавить префикс place_id: . Следующий код указывает мэрию Нью-Йорка в качестве источника запроса origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8 .

• radius задает радиус, указанный в метрах, в котором искать панораму с центром на заданной широте и долготе. Допустимые значения — неотрицательные целые числа. Значение по умолчанию — 50.

• source ограничивает поиск в Просмотре улиц выбранными источниками. Допустимые значения:

  • default используются стандартные источники для Просмотра улиц; поиск не ограничивается конкретными источниками.
  • outdoor ограничивает поиск уличными коллекциями. Коллекции для помещений не включаются в результаты поиска. Обратите внимание, что наружные панорамы могут не существовать для указанного местоположения. Также обратите внимание, что поиск возвращает только те панорамы, где можно определить, находятся ли они в помещении или на улице. Например, фотосферы не возвращаются, потому что неизвестно, находятся ли они в помещении или на улице.