Встроить карту

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

Создайте URL-адрес API для встраивания карт.

Ниже приведён пример URL-адреса, загружающего API для встраивания карт:

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

Заменять:

Вставьте URL-адрес в iframe.

Чтобы использовать 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 отклонит запросы. Для корректной работы ограничения добавьте свойство referrerpolicy к iframe, как в примере выше, чтобы явно разрешить отправку заголовков Referer в Google.

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

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

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

режим place

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

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

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

Параметр Тип Описание Принятые значения
q Необходимый Определяет местоположение маркера на карте. Название места, адрес, код или идентификатор места экранируются в URL-адресе. 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 Необходимый Определяет начальную точку, от которой будет отображаться маршрут. Название места, адрес, код, координаты широты/долготы или идентификатор места экранируются в URL-адресе. API встраивания карт поддерживает как + , так и %20 при экранировании пробелов. Например, преобразуйте "City Hall, New York, NY" в City+Hall,New+York,NY , или коды "849VCWC8+R9" в 849VCWC8%2BR9 .
destination Необходимый Определяет конечную точку направлений. Название места, адрес, код, координаты широты/долготы или идентификатор места экранируются в URL-адресе. API встраивания карт поддерживает как + , так и %20 при экранировании пробелов. Например, преобразуйте "City Hall, New York, NY" в City+Hall,New+York,NY , или коды "849VCWC8+R9" в 849VCWC8%2BR9 .
waypoints Необязательный Указывает одно или несколько промежуточных мест для прокладки маршрута между пунктом отправления и пунктом назначения. Название места, адрес или идентификатор места . Можно указать несколько путевых точек, разделяя их символом вертикальной черты (|) (например Berlin,Germany|Paris,France ). Можно указать до 20 путевых точек.
mode Необязательный Определяет способ передвижения. Если способ передвижения не указан, API Maps Embed отобразит один или несколько наиболее подходящих способов передвижения для указанного маршрута. 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

API Maps Embed позволяет отображать изображения 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 10.013988). API отображает панораму, снятую ближе всего к этому местоположению. Поскольку изображения Street View периодически обновляются, и фотографии могут быть сделаны с немного разных позиций каждый раз, возможно, что при обновлении изображений ваше местоположение может автоматически переключиться на другую панораму.

  • 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» .

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

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

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

  • q
  • origin
  • destination
  • waypoints

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

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

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

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