В этом руководстве показано, как встроить интерактивную карту на вашу веб-страницу.
Создайте 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
¢er=-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 не возвращаются, поскольку неизвестно, находятся ли они в помещении или на открытом воздухе.
-