Deweloperzy mogą umieszczać mapę na żywo Waze w swoich witrynach. Mapa na żywo umożliwia odwiedzającym wyszukiwanie lokalizacji i wyświetlanie informacji o natężeniu ruchu w czasie rzeczywistym na podstawie danych mapy Waze w czasie rzeczywistym.
Mapę na żywo Waze możesz umieścić w swojej witrynie za pomocą elementu iframe, dzięki czemu będzie ona wyglądać tak:
Domyślnie mapa na żywo zawiera w lewym dolnym rogu link do opcji wyszukiwania i wyznaczania trasy na tej mapie.
Przykłady dodatkowych opcji konfiguracji mapy na żywo znajdziesz w sekcji Przykłady.
Aby umieścić element iframe z mapą na żywo Waze:
- Otwórz stronę internetową w edytorze tekstu.
- Aby wygenerować element iframe na stronie internetowej, dodaj do niej kod iframe.
- Otwórz mapę na żywo Waze, wyszukaj swoją lokalizację na pasku wyszukiwania lub powiększ mapę i kliknij konkretny segment.
- W prawym dolnym rogu mapy kliknij ikonę udostępniania
na
mapie. Powinno się pojawić wyskakujące okienko ze spersonalizowanym kodem do umieszczenia. Skopiuj kod i wklej go w treści strony internetowej.
Przykład
Poniższy przykład pokazuje, jak umieścić mapę na żywo w swojej witrynie. Zaktualizuj parametry adresu URL pod kątem swojego przypadku użycia.
<iframe src="https://embed.waze.com/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Aby umieścić element iframe w elastycznej witrynie, zalecamy użycie typowych technik CSS, aby automatycznie ustawić rozmiar elementu iframe na podstawie rozmiaru ekranu.
Parametry adresu URL
W tabeli poniżej opisujemy parametry elementu iframe Waze:
| Parametr | Wymagany? | Opis |
|---|---|---|
desc |
Opcjonalny | Ustaw ten parametr na dowolną wartość, aby wyświetlić blok tekstu opisowego na mapie na żywo. Nadawcy używają tego tekstu, aby przekazywać użytkownikom Waze aktualne informacje bez konieczności ręcznego aktualizowania witryn swoich stacji. Cały tekst jest tworzony przez Waze, co zapewnia jego poprawność. |
lat |
Wymagany | Szerokość geograficzna punktu środkowego mapy. |
lon |
Wymagany | Długość geograficzna punktu środkowego mapy. |
pin |
Opcjonalny | Ustaw wartość 1, aby umieścić pinezkę na środku mapy. Na przykład: <iframe src="https://embed.waze.com/iframe? zoom=12&lat=45.6906304&lon=-120.810983&pin=1" width="300" height="400"></iframe> |
zoom |
Wymagany | Poziom powiększenia mapy po jej otwarciu. Minimalna wartość to 3 (najmniejsze powiększenie). Maksymalna wartość to 17 (największe powiększenie). |
Lokalizacja
Domyślny kod języka to angielski. Więcej informacji znajdziesz w sekcji Lokalizowanie elementu iframe.
Poniższy przykład pokazuje, jak zmienić język wyświetlania:
<iframe src="https://embed.waze.com/fr/iframe?zoom=12&lat=45.6906304&lon=-120.810983" width="300" height="400"></iframe>
Wytyczne
Aby umieścić mapę na żywo Waze w swojej witrynie, musisz przestrzegać tych wytycznych:
- Nie wolno w żaden sposób kojarzyć Waze z używaniem mapy innej niż Waze.
- Nie wolno używać materiałów z logo Waze (logo, ikony itp.) z mapami innymi niż Waze.
Przykłady
Poniższe przykłady pokazują, jak za pomocą kombinacji parametrów dodawać różne elementy wizualne do mapy na żywo:
Przykład 1
Poniższy przykład implementacji elementu iframe pokazuje pinezkę na mapie.
Manhattan, Nowy Jork (z pinezką):
Element iframe używa tego kodu:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=40.78247&lon=-73.97105&pin=1"
width="100%" height="520"></iframe>Przykład 2
Poniższy przykład implementacji elementu iframe pokazuje pinezkę na mapie i zawiera tekst opisowy.
São Paulo (z pinezką i opisem):
Element iframe używa tego kodu:
<iframe src="https://embed.waze.com/iframe?zoom=14&lat=-23.55052&lon=-46.63331&pin=1&desc=1"
width="100%" height="520"></iframe>Przykład 3
Poniższy przykład implementacji elementu iframe pokazuje pinezkę na mapie.
Paryż, Francja (z pinezką):
Element iframe używa tego kodu:
<iframe src="https://embed.waze.com/iframe?zoom=13&lat=48.85661&lon=2.35222&pin=1"
width="100%" height="520"></iframe>Kontakt ze społecznością deweloperów Waze
Więcej informacji znajdziesz na forum społeczności deweloperów Waze: Waze Developers' Community forum.