Вставка карты

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

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

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

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&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 Необязательный Определяет соответствующие границы и метки для отображения, исходя из геополитической чувствительности. Принимает код региона, указанный в виде двухсимвольного (нечислового) субтега региона Юникода, сопоставленного со знакомыми двухсимвольными значениями 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 Необязательный Определяет соответствующие границы и метки для отображения, исходя из геополитической чувствительности. Принимает код региона, указанный в виде двухсимвольного (нечислового) субтега региона Юникода, сопоставленного со знакомыми двухсимвольными значениями 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 Необходимый Определяет отправную точку, от которой отображаются направления. Название места с экранированием URL, адрес плюс код, координаты широты и долготы или идентификатор места . Maps Embed API поддерживает как + , так и %20 при экранировании пробелов. Например, преобразуйте «City Hall, New York, NY» в City+Hall,New+York,NY или плюсовые коды «849VCWC8+R9» в 849VCWC8%2BR9 .
destination Необходимый Определяет конечную точку направлений. Название места с экранированием URL, адрес плюс код, координаты широты и долготы или идентификатор места . 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 Необязательный Определяет соответствующие границы и метки для отображения, исходя из геополитической чувствительности. Принимает код региона, указанный в виде двухсимвольного (нечислового) субтега региона Юникода, сопоставленного со знакомыми двухсимвольными значениями ccTLD («домен верхнего уровня»). См . сведения о покрытии платформы Google Maps для поддерживаемых регионов.

режим streetview

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

Каждая панорама 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 Необязательный Определяет соответствующие границы и метки для отображения, исходя из геополитической чувствительности. Принимает код региона, указанный в виде двухсимвольного (нечислового) субтега региона Юникода, сопоставленного со знакомыми двухсимвольными значениями 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 Необязательный Определяет соответствующие границы и метки для отображения, исходя из геополитической чувствительности. Принимает код региона, указанный в виде двухсимвольного (нечислового) субтега региона Юникода, сопоставленного со знакомыми двухсимвольными значениями 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 ограничивает поиск Street View выбранными источниками. Допустимые значения:

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