Разработчики могут встраивать интерактивную карту Waze на свой веб-сайт. Интерактивная карта позволяет посетителям искать места и просматривать обновления информации о дорожной ситуации в режиме реального времени на основе данных карты Waze.
Вы можете встроить карту Waze Live Map на свой веб-сайт с помощью iFrame, в результате чего результат будет выглядеть следующим образом:
По умолчанию в левом нижнем углу интерактивной карты отображается ссылка на параметры поиска и построения маршрута.
Примеры дополнительных параметров настройки интерактивной карты см. в разделе «Примеры» .
Чтобы встроить iFrame с интерактивной картой Waze:
- Откройте свою веб-страницу в текстовом редакторе.
- Чтобы создать iFrame на вашей веб-странице, добавьте код iFrame на вашу веб-страницу.
- Откройте приложение Waze Live Map , найдите свое местоположение либо в строке поиска, либо увеличив масштаб и щелкнув по определенному участку карты.
- Нажмите на значок «Поделиться».
в правом нижнем углу карты. Должно появиться всплывающее окно с пользовательским кодом для встраивания. Скопируйте и вставьте этот код в тело вашей веб-страницы.
Пример
В следующем примере показано, как встроить интерактивную карту на ваш веб-сайт. Обновите параметры URL-адреса в соответствии с вашим сценарием использования.
<iframe src="https://embed.waze.com/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Для встраивания iFrame в адаптивный веб-сайт мы рекомендуем использовать распространенные методы CSS для автоматической установки размера iFrame в зависимости от размера экрана.
Параметры URL
В следующей таблице описаны параметры iFrame приложения Waze:
| Параметр | Необходимый? | Описание |
|---|---|---|
desc | Необязательный | Установите для этого параметра любое значение, чтобы отобразить описательный текстовый блок на интерактивной карте. Вещатели используют этот текст для предоставления актуальной информации пользователям Waze, без необходимости ручного обновления веб-сайтов своих станций. Весь текст создается Waze, что гарантирует его корректность. |
lat | Необходимый | Широта центральной точки карты. |
lon | Необходимый | Долгота центральной точки карты. |
pin | Необязательный | Установите значение 1, чтобы разместить метку в центре карты. Например: <iframe src="https://embed.waze.com/iframe? zoom=12&lat=45.6906304&lon=-120.810983&pin=1" width="300" height="400"></iframe> |
zoom | Необходимый | Уровень увеличения карты при её открытии. Минимальное значение — 3 (наименьшее увеличение). Максимальное значение — 17 (наибольшее увеличение). |
Локализация
Языковой код по умолчанию — английский. Для получения дополнительной информации см. раздел «Локализация iFrame» .
В следующем примере показано, как изменить язык отображения:
<iframe src="https://embed.waze.com/fr/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Руководящие принципы
Для встраивания интерактивной карты Waze на ваш сайт необходимо соблюдать следующие правила:
- Ни в коем случае не следует связывать Waze с использованием карт, не относящихся к Waze.
- Не используйте фирменные материалы Waze (логотип, значки и т. д.) на картах, не относящихся к Waze.
Примеры
В следующих примерах показано использование комбинаций параметров для добавления различных визуальных элементов на интерактивную карту:
Пример 1
Следующая реализация iframe отображает метку на карте.
Манхэттен, Нью-Йорк (с булавкой):
В iframe используется следующий код:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=40.78247&lon=-73.97105&pin=1"
width="100%" height="520"></iframe>Пример 2
В приведенном ниже примере в iframe отображается метка на карте и сопровождается описательным текстом.
Сан-Паулу (с меткой и описанием):
В iframe используется следующий код:
<iframe src="https://embed.waze.com/iframe?zoom=14&lat=-23.55052&lon=-46.63331&pin=1&desc=1"
width="100%" height="520"></iframe>Пример 3
Следующая реализация iframe отображает метку на карте.
Париж, Франция (с булавкой):
В iframe используется следующий код:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=48.85661&lon=2.35222&pin=1"
width="100%" height="520"></iframe>Свяжитесь с сообществом разработчиков Waze
Для получения более подробной информации присоединяйтесь к обсуждению на форуме сообщества разработчиков Waze .