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

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

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

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

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

Вы можете указать один из следующих режимов карты для использования в 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	Необходимый	Определяет местоположение маркера карты.	Название места, адрес, код plus или идентификатор места , экранированные URL. API Maps Embed поддерживает как + , так и %20 при экранировании пробелов. Например, преобразуйте "City Hall, New York, NY" в City+Hall,New+York,NY или коды plus "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-экранированное название места, адрес, плюс-код, координаты широты/долготы или идентификатор места . 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	Необязательный	Определяет соответствующие границы и метки для отображения с учетом геополитической чувствительности.	Принимает код региона, указанный как двухсимвольный (не числовой) подтег региона Unicode, сопоставляющий его со знакомыми двухсимвольными значениями 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 отображает панораму, сфотографированную ближе всего к этому местоположению. Поскольку изображения 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» .

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

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

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

• q
• origin
• destination
• waypoints

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

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

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

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