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

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

Создание 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

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

режим view

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

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

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

режим directions

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

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

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

режим 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-адреса являются необязательными:

режим 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

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

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

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