W tym przewodniku pokazujemy, jak umieścić interaktywną mapę na stronie internetowej.
Tworzenie adresu URL interfejsu Maps Embed API
Poniżej znajduje się przykładowy adres URL, który wczytuje interfejs Maps Embed API:
https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS
Zastąp:
- MAP_MODE za pomocą trybu mapy.
- YOUR_API_KEY za pomocą klucza interfejsu API. Więcej informacji znajdziesz w artykule o pobieraniu klucza interfejsu API.
- PARAMETERS z wymaganymi i opcjonalnymi parametrami trybu mapy.
Dodawanie adresu URL do elementu iframe
Aby użyć interfejsu Maps Embed API na swojej stronie internetowej, ustaw utworzony URL jako wartość atrybutu src
elementu iframe. Kontroluj rozmiar mapy za pomocą atrybutów height
i width
elementu iframe, np.:
<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>
W przykładzie iframe powyżej użyto dodatkowych właściwości:
- Właściwość
allowfullscreen
umożliwiająca wyświetlanie niektórych fragmentów mapy na pełnym ekranie. - Właściwości
frameborder="0"
istyle="border:0"
do usuwania z mapy standardowego obramowania iframe. - Właściwość
referrerpolicy="no-referrer-when-downgrade"
, która umożliwia przeglądarce wysyłanie pełnego adresu URL w postaci nagłówkaReferer
z żądaniem, aby ograniczenia dotyczące klucza interfejsu API działały prawidłowo.
Możesz zmienić rozmiar elementu iframe, aby pasował do struktury i projektu swojej witryny, ale okazuje się, że zwykle łatwiej jest wchodzić w interakcje z większymi mapami. Pamiętaj, że osadzone mapy nie są obsługiwane w żadnym z wymiarów poniżej 200 pikseli.
Ograniczenia klucza interfejsu API
Jeśli w witrynie hostującej metatag referrer
jest ustawiony na no-referrer
lub same-origin
, przeglądarka nie wyśle nagłówka Referer
do Google. Może to spowodować odrzucenie żądań przez ograniczenie klucza interfejsu API. Aby ograniczenie działało prawidłowo, dodaj do elementu iframe właściwość referrerpolicy
(jak w przykładzie powyżej), by wyraźnie zezwolić na wysyłanie do Google nagłówków Referer
.
Reklamy na mapie
Interfejs Maps Embed API może obsługiwać reklamy wyświetlane na mapie. Format reklamy i zestaw reklam wyświetlanych na danej mapie mogą ulec zmianie bez powiadomienia.
Wybieranie trybów mapy
Możesz wybrać jeden z następujących trybów mapy do użycia w adresie URL żądania:
place
: umożliwia wyświetlanie pinezki na mapie w określonym miejscu lub adresie, np. punkcie orientacyjnym, firmie, obiekcie geograficznym lub mieście.view
: zwraca mapę bez znaczników i wskazówek dojazdu.directions
: pokazuje ścieżkę między co najmniej 2 punktami na mapie, a także odległość i czas podróży.streetview
: pokazuje interaktywne, panoramiczne widoki z wyznaczanych lokalizacji.search
: pokazuje wyniki wyszukiwania w widocznym regionie mapy.
Tryb place
Ten URL wyświetla znacznik mapy na wieży Eiffla w trybie mapy place
:
https://www.google.com/maps/embed/v1/place
?key=YOUR_API_KEY
&q=Eiffel+Tower,Paris+France
Możesz użyć tych parametrów:
Parametr | Typ | Opis | Akceptowane wartości |
---|---|---|---|
q |
Wymagane | Określa lokalizację znacznika mapy. | Nazwa miejsca, adres, kod lub identyfikator miejsca ze zmianą znaczenia w adresie URL.
Interfejs Maps Embed API obsługuje zarówno kod + , jak i %20 podczas zmiany znaczenia spacji. Na przykład przekonwertuj nazwę „City Hall, New York, NY” na City+Hall,New+York,NY lub użyj kodu plus „849VCWC8+R9” na numer 849VCWC8%2BR9 . |
center |
Opcjonalnie | Definiuje środek widoku mapy. | Może przyjmować wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840 . |
zoom |
Opcjonalnie | Ustawia początkowy poziom powiększenia mapy. | Wartości z zakresu od 0 (cały świat) do 21 (pojedyncze budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ elementów mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalnie | Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. Jeśli żądany język nie jest obsługiwany w zestawie kafelków, zostanie użyty domyślny język tego zbioru. | |
region |
Opcjonalnie | Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony. |
Tryb view
W tym przykładzie do wyświetlania widoku satelitarnego mapy używany jest tryb view
i opcjonalny parametr maptype
:
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
&maptype=satellite
Możesz użyć tych parametrów:
Parametr | Typ | Opis | Akceptowane wartości |
---|---|---|---|
center |
Wymagane | Definiuje środek widoku mapy. | Może przyjmować wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840 . |
zoom |
Opcjonalnie | Ustawia początkowy poziom powiększenia mapy. | Wartości z zakresu od 0 (cały świat) do 21 (pojedyncze budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ elementów mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalnie | Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. Jeśli żądany język nie jest obsługiwany w zestawie kafelków, zostanie użyty domyślny język tego zbioru. | |
region |
Opcjonalnie | Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony. |
Tryb directions
W tym przykładzie użyto trybu directions
, aby wyświetlić trasę między Oslow a Telemark, Norwegią, odległość i czas podróży, z pominięciem dróg płatnych i autostrad.
https://www.google.com/maps/embed/v1/directions
?key=YOUR_API_KEY
&origin=Oslo+Norway
&destination=Telemark+Norway
&avoid=tolls|highways
Możesz użyć tych parametrów:
Parametr | Typ | Opis | Akceptowane wartości |
---|---|---|---|
origin |
Wymagane | Określa punkt początkowy, z którego mają być wyświetlane wskazówki dojazdu. | Nazwa miejsca, adres, kod, współrzędne szerokości i długości geograficznej lub identyfikator miejsca ze zmianą znaczenia w adresie URL.
Interfejs Maps Embed API obsługuje zarówno kod + , jak i %20 podczas zmiany znaczenia spacji. Na przykład przekonwertuj nazwę „City Hall, New York, NY” na City+Hall,New+York,NY lub użyj kodu plus „849VCWC8+R9” na numer 849VCWC8%2BR9 . |
destination |
Wymagane | Określa punkt końcowy trasy dojazdu. | Nazwa miejsca, adres, kod, współrzędne szerokości i długości geograficznej lub identyfikator miejsca ze zmianą znaczenia w adresie URL.
Interfejs Maps Embed API obsługuje zarówno kod + , jak i %20 podczas zmiany znaczenia spacji. Na przykład przekonwertuj nazwę „City Hall, New York, NY” na City+Hall,New+York,NY lub użyj kodu plus „849VCWC8+R9” na numer 849VCWC8%2BR9 . |
waypoints |
Opcjonalnie | Określa co najmniej 1 miejsce pośrednie do wyznaczania wskazówek dojazdu między miejscem wylotu a celem podróży. | Nazwa miejsca, adres lub identyfikator miejsca.
Możesz określić wiele punktów pośrednich za pomocą pionowej kreski (|) do oddzielenia miejsc (np. Berlin,Germany|Paris,France ). Możesz określić do 20 punktów pośrednich. |
mode |
Opcjonalnie | Określa metodę podróży. Jeśli nie podasz trybu, interfejs Maps Embed API wyświetli co najmniej 1 z najbardziej odpowiednich trybów dla określonej trasy. | driving , walking (najlepiej w przypadku ścieżek dla pieszych i chodników, jeśli są dostępne), bicycling (oznacza trasy to ścieżki rowerowe i preferowane ulice, jeśli są dostępne), transit lub flying . |
avoid |
Opcjonalnie | Określa obiekty, których należy unikać we wskazówkach dojazdu. Pamiętaj, że nie wyklucza to tras obejmujących obiekty objęte ograniczeniami; wyniki promują bardziej korzystne trasy. | tolls , ferries lub highways .
Poszczególne wartości rozdziel pionową kreską (np. avoid=tolls|highways ). |
units |
Opcjonalnie | Określa metodę pomiaru, dane lub imperialne podczas wyświetlania odległości w wynikach. Jeśli nie określisz units , jednostki, które mają zostać użyte, będą określane na podstawie kraju origin w zapytaniu. |
metric lub imperial |
center |
Opcjonalnie | Definiuje środek widoku mapy. | Może przyjmować wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840 . |
zoom |
Opcjonalnie | Ustawia początkowy poziom powiększenia mapy. | Wartości z zakresu od 0 (cały świat) do 21 (pojedyncze budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ elementów mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalnie | Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. Jeśli żądany język nie jest obsługiwany w zestawie kafelków, zostanie użyty domyślny język tego zbioru. | |
region |
Opcjonalnie | Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony. |
Tryb streetview
Interfejs Maps Embed API pozwala wyświetlać zdjęcia Street View jako interaktywne panoramy z wybranych lokalizacji na całym obszarze. Dostępne są też zdjęcia sferyczne przesyłane przez użytkowników i kolekcje specjalne Street View.
Każda panorama Street View obejmuje pełny widok 360 stopni z jednego miejsca. Obrazy zawierają widok w poziomie (360 stopni) i 180 stopni w pionie (od góry do góry w dół). Tryb streetview
umożliwia korzystanie z przeglądarki, która renderuje panoramę w formie sfery, a na środku znajduje się kamera. Możesz sterować kamerą,
by sterować powiększeniem i orientacją kamery.
Zobacz tę panoramę w trybie streetview
:
https://www.google.com/maps/embed/v1/streetview
?key=YOUR_API_KEY
&location=46.414382,10.013988
&heading=210
&pitch=10
&fov=35
Wymagany jest jeden z tych parametrów adresu URL:
location
akceptuje szerokość i długość geograficzną w postaci wartości rozdzielonych przecinkami (46.414382,10.013988
). Interfejs API wyświetli panoramę sfotografowaną najbliżej tej lokalizacji. Zdjęcia Street View są co jakiś czas odświeżane, a zdjęcia mogą być za każdym razem wykonywane w nieco innej pozycji. Dlatego po aktualizacji zdjęć Twoja lokalizacja może się zmienić w widok panoramiczny.pano
to specjalny identyfikator panoramy. Jeśli podajesz właściwośćpano
, możesz też podaćlocation
. Parametrlocation
będzie używany tylko wtedy, gdy interfejs API nie będzie mógł znaleźć identyfikatora panoramy.
Te parametry adresu URL są opcjonalne:
Parametr | Typ | Opis | Akceptowane wartości |
---|---|---|---|
heading |
Opcjonalnie | Wskazuje kierunek kompasu aparatu w stopniach w prawo, od kierunku północnego. | Wartość w stopniach: od -180° do 360° |
pitch |
Opcjonalnie | określa kąt obrotu kamery w górę lub w dół. Wartości dodatnie powodują obrót kamery w górę, a ujemne – w dół. Domyślne ustawienie to 0° w zależności od pozycji kamery podczas robienia obrazu. Z tego względu nachylenie o 0° jest często, ale nie zawsze, poziome. Na przykład zdjęcie wykonane na wzgórzu prawdopodobnie będzie miało domyślny kąt, który nie jest poziomy. | Wartość w stopniach od -90° do 90° |
fov |
Opcjonalnie | określa poziome pole widzenia obrazu. Domyślna wartość to 90°. W przypadku widocznego obszaru o stałym rozmiarze pole widzenia można uznać za poziom powiększenia – mniejsze liczby oznaczają większy poziom powiększenia. | Wartość w stopniach, w zakresie 10°–100° |
center |
Opcjonalnie | Definiuje środek widoku mapy. | Może przyjmować wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840 . |
zoom |
Opcjonalnie | Ustawia początkowy poziom powiększenia mapy. | Wartości z zakresu od 0 (cały świat) do 21 (pojedyncze budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ elementów mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalnie | Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. Jeśli żądany język nie jest obsługiwany w zestawie kafelków, zostanie użyty domyślny język tego zbioru. | |
region |
Opcjonalnie | Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony. |
Tryb search
Tryb Search
wyświetla wyniki wyszukiwania w widocznym obszarze mapy.
Zalecamy zdefiniowanie lokalizacji na potrzeby wyszukiwania przez jej uwzględnienie w wyszukiwanym haśle (record+stores+in+Seattle
) lub za pomocą parametrów center
i zoom
, które określają zakres wyszukiwania.
https://www.google.com/maps/embed/v1/search
?key=YOUR_API_KEY
&q=record+stores+in+Seattle
Możesz użyć tych parametrów:
Parametr | Typ | Opis | Akceptowane wartości |
---|---|---|---|
q |
Wymagane | Definiuje wyszukiwane hasło. | Może zawierać ograniczenie geograficzne, np. in+Seattle lub near+98033 . |
center |
Opcjonalnie | Definiuje środek widoku mapy. | Może przyjmować wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840 . |
zoom |
Opcjonalnie | Ustawia początkowy poziom powiększenia mapy. | Wartości z zakresu od 0 (cały świat) do 21 (pojedyncze budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ elementów mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalnie | Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. Jeśli żądany język nie jest obsługiwany w zestawie kafelków, zostanie użyty domyślny język tego zbioru. | |
region |
Opcjonalnie | Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony. |
Parametry identyfikatora miejsca
Interfejs Maps Embed API obsługuje korzystanie z identyfikatorów miejsc zamiast podawania nazwy miejsca lub adresu. Identyfikatory miejsc to stały sposób unikalnej identyfikacji miejsca. Więcej informacji znajdziesz w dokumentacji interfejsu Google Places API.
Interfejs Maps Embed API akceptuje identyfikatory miejsc dla tych parametrów adresu URL:
q
origin
destination
waypoints
Aby użyć identyfikatora miejsca, musisz najpierw dodać przedrostek place_id:
. Ten kod określa Ratusz Nowojorski jako źródło żądania wskazówek dojazdu: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
radius
ustawia promień (podany w metrach), w którym można wyszukać panoramę, wyśrodkowany na danej szerokości i długości geograficznej. Prawidłowe wartości to nieujemne liczby całkowite. Wartość domyślna to 50.source
ogranicza wyszukiwania w Street View do wybranych źródeł. Prawidłowe wartości to:default
używa domyślnych źródeł Street View. Wyszukiwania nie są ograniczone do konkretnych źródeł.outdoor
ogranicza wyszukiwanie do kolekcji zewnętrznych. Kolekcje wnętrz nie są uwzględniane w wynikach wyszukiwania. Pamiętaj, że w przypadku określonej lokalizacji panoramy zewnętrzne mogą nie istnieć. Pamiętaj też, że wyszukiwanie zwróci panoramy tylko wtedy, gdy można określić, czy są one wewnątrz czy na zewnątrz. Na przykład zdjęcia sferyczne nie są zwracane, ponieważ nie wiadomo, czy znajdują się one wewnątrz czy na zewnątrz.