Z tego przewodnika dowiesz się, jak umieścić interaktywną mapę na swojej stronie internetowej.
Tworzenie adresu URL interfejsu Maps Embed API
Oto przykładowy 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 w trybie mapy.
- YOUR_API_KEY za pomocą klucza interfejsu API. Aby dowiedzieć się więcej, zobacz Uzyskiwanie 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. Możesz kontrolować 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
, która umożliwia wyświetlenie niektórych części mapy na pełnym ekranie. - Właściwości
frameborder="0"
istyle="border:0"
do usuwania standardowego obramowania iframe z okolicy mapy. - Właściwość
referrerpolicy="no-referrer-when-downgrade"
, która umożliwia przeglądarce wysyłanie pełnego adresu URL jako nagłówkaReferer
z żądaniem. Dzięki temu ograniczenia klucza interfejsu API mogą działać prawidłowo.
Możesz zmienić rozmiar elementu iframe, by pasował do struktury i projektu Twojej witryny, ale zauważyliśmy, że użytkownikom zwykle łatwiej jest korzystać z większych map. Pamiętaj, że umieszczone mapy nie mogą mieć rozmiaru poniżej 200 pikseli w żadnym z tych wymiarów.
Ograniczenia klucza interfejsu API
Jeśli w witrynie hostującej jest metatag referrer
ustawiony na no-referrer
lub same-origin
, przeglądarka nie wyśle nagłówka Referer
do Google. Może to spowodować odrzucenie przez ograniczenie klucza interfejsu API żądania. Aby ograniczenie działało prawidłowo, dodaj do elementu iframe właściwość referrerpolicy
(jak w przykładzie powyżej), aby bezpośrednio zezwolić na wysyłanie nagłówków Referer
do Google.
Reklamy na mapie
Interfejs Maps Embed API może obejmować reklamy na mapach. Format i zestaw reklam wyświetlanych na danej mapie mogą się zmienić bez powiadomienia.
Wybieranie trybów mapy
W adresie URL żądania możesz wybrać jeden z tych trybów mapy:
place
: wyświetla pinezkę na mapie w konkretnym miejscu lub adresie, np. punktowi orientacyjnym, firmie, obiekcie geograficznym lub miejscowości.view
: zwraca mapę bez znaczników i wskazówek.directions
: wyświetla ścieżkę między co najmniej 2 określonymi punktami na mapie oraz odległość i czas podróży.streetview
: umożliwia interaktywne widoki panoramiczne z wskazanej lokalizacji.search
: pokazuje wyniki wyszukiwania w widocznym regionie mapy.
Tryb place
Ten adres URL używa trybu mapy place
do wyświetlania znacznika mapy na wieży Eiffla:
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 ze zmianą znaczenia w postaci adresu URL, adres oraz kod lub identyfikator miejsca.
Interfejs Maps Embed API obsługuje zarówno + , jak i %20 podczas zmiany znaczenia pokoi. Na przykład zmień nazwę „City Hall, New York, NY” na
City+Hall,New+York,NY lub kody plus „849VCWC8+R9” na
849VCWC8%2BR9 . |
center |
Opcjonalny | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej, na przykład: 37.4218,-122.0840 . |
zoom |
Opcjonalny | 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 |
Opcjonalny | Definiuje typ kafelków mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalny | Określa język, który będzie używany w elementach interfejsu oraz do wyświetlania etykiet na fragmentach mapy. Domyślnie użytkownicy zobaczą 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 przypadku zestawu kafelków, będzie używany język domyślny. | |
region |
Opcjonalny | Określa granice i etykiety do wyświetlenia, biorąc pod uwagę wrażliwość geopolityczną. | Akceptuje kod regionu jako dwuznakowy (nienumeryczny) subtag regionu Unicode mapowany na znane dwuznakowe wartości domeny ccTLD („domena najwyższego poziomu”). Sprawdź informacje o zasięgu Google Maps Platform w obsługiwanych regionach. |
Tryb view
Poniższy przykład pokazuje widok satelitarny mapy z użyciem trybu view
i opcjonalnego parametru 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 | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej, na przykład: 37.4218,-122.0840 . |
zoom |
Opcjonalny | 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 |
Opcjonalny | Definiuje typ kafelków mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalny | Określa język, który będzie używany w elementach interfejsu oraz do wyświetlania etykiet na fragmentach mapy. Domyślnie użytkownicy zobaczą 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 przypadku zestawu kafelków, będzie używany język domyślny. | |
region |
Opcjonalny | Określa granice i etykiety do wyświetlenia, biorąc pod uwagę wrażliwość geopolityczną. | Akceptuje kod regionu jako dwuznakowy (nienumeryczny) subtag regionu Unicode mapowany na znane dwuznakowe wartości domeny ccTLD („domena najwyższego poziomu”). Sprawdź informacje o zasięgu Google Maps Platform w obsługiwanych regionach. |
Tryb directions
W poniższym przykładzie użyto trybu directions
do wyświetlenia trasy między Oslowem a Telemark w Norwegii, odległości oraz czasu podróży z omijaniem opłat 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ą zostać wyświetlone wskazówki dojazdu. | Nazwa, adres i kod miejsca ze zmianą znaczenia za pomocą adresu URL, współrzędne szerokości i długości geograficznej lub identyfikator miejsca.
Interfejs Maps Embed API obsługuje zarówno + , jak i %20 podczas zmiany znaczenia pokoi. Na przykład zmień nazwę „City Hall, New York, NY” na
City+Hall,New+York,NY lub kody plus „849VCWC8+R9” na
849VCWC8%2BR9 . |
destination |
Wymagane | Określa punkt końcowy trasy dojazdu. | Nazwa, adres i kod miejsca ze zmianą znaczenia za pomocą adresu URL, współrzędne szerokości i długości geograficznej lub identyfikator miejsca.
Interfejs Maps Embed API obsługuje zarówno + , jak i %20 podczas zmiany znaczenia pokoi. Na przykład zmień nazwę „City Hall, New York, NY” na
City+Hall,New+York,NY lub kody plus „849VCWC8+R9” na
849VCWC8%2BR9 . |
waypoints |
Opcjonalny | Określa co najmniej jedno miejsce pośrednie służące do wyznaczania tras między punktem początkowym a miejscem docelowym. | Nazwa, adres lub identyfikator miejsca.
Wiele punktów pośrednich można określać za pomocą pionowej kreski (|) do rozdzielania miejsc (np. Berlin,Germany|Paris,France ). Można określić maksymalnie 20 punktów pośrednich. |
mode |
Opcjonalny | Definiuje metodę podróży. Jeśli nie określisz trybu, interfejs Maps Embed API będzie wyświetlać co najmniej jeden z najbardziej odpowiednich dla danej trasy. | driving , walking (preferowane są ścieżki dla pieszych i chodników, jeśli są dostępne), bicycling (które obejmują trasy rowerowe i preferowane ulice, jeśli są dostępne), transit lub flying . |
avoid |
Opcjonalny | Określa funkcje, których należy unikać we wskazówkach dojazdu. Pamiętaj, że nie wyklucza to tras, które obejmują obiekty objęte ograniczeniami. Zwracają wyniki względem bardziej pozytywnych tras. | tolls , ferries lub highways .
Kolejne wartości należy rozdzielać pionową kreską (np. avoid=tolls|highways ). |
units |
Opcjonalny | Określa metodę pomiaru, metryczną lub imperialną podczas wyświetlania odległości w wynikach. Jeśli nie określisz units , jednostki, których chcesz użyć, określają kraj zapytania origin . |
metric lub imperial |
center |
Opcjonalny | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej, na przykład: 37.4218,-122.0840 . |
zoom |
Opcjonalny | 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 |
Opcjonalny | Definiuje typ kafelków mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalny | Określa język, który będzie używany w elementach interfejsu oraz do wyświetlania etykiet na fragmentach mapy. Domyślnie użytkownicy zobaczą 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 przypadku zestawu kafelków, będzie używany język domyślny. | |
region |
Opcjonalny | Określa granice i etykiety do wyświetlenia, biorąc pod uwagę wrażliwość geopolityczną. | Akceptuje kod regionu jako dwuznakowy (nienumeryczny) subtag regionu Unicode mapowany na znane dwuznakowe wartości domeny ccTLD („domena najwyższego poziomu”). Sprawdź informacje o zasięgu Google Maps Platform w obsługiwanych regionach. |
Tryb streetview
Interfejs Maps Embed API umożliwia wyświetlanie zdjęć Street View jako interaktywnych panoram z wyznaczonych lokalizacji na całym obszarze pokrycia. Dostępne są również zdjęcia sferyczne przesyłane przez użytkowników i specjalne kolekcje Street View.
Każda panorama Street View zapewnia pełny widok 360 stopni z pojedynczego miejsca. Zdjęcia obejmują widok 360 stopni w poziomie (pełne zawijanie) i 180 stopni w pionie (od prostej do prawej). W trybie streetview
przeglądarka renderuje powstałą panoramę jako sferę z aparatem pośrodku. Możesz 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ą jako wartości rozdzielane 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 i za każdym razem mogą zostać zrobione z nieco innych pozycji, dlatego podczas aktualizowania zdjęć lokalizacja może zostać zmieniona na inną panoramę.pano
to identyfikator konkretnej panoramy. Jeśli podaszpano
, możesz też określićlocation
.location
będzie używane tylko wtedy, gdy interfejs API nie znajdzie identyfikatora panoramy.
Te parametry adresu URL są opcjonalne:
Parametr | Typ | Opis | Akceptowane wartości |
---|---|---|---|
heading |
Opcjonalny | Wskazuje na kompasie kierunek kamery podany w stopniach w prawo, od północy. | Wartość w stopniach od -180° do 360° |
pitch |
Opcjonalny | 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ślny kąt 0° jest ustawiany zależnie od pozycji kamery podczas robienia zdjęcia. Z tego powodu nachylenie wynoszące 0° często, ale nie zawsze, ma charakter poziomy. Na przykład zdjęcie zrobione ze wzgórza prawdopodobnie będzie miało domyślne ustawienie przechylenia, które nie jest poziome. | Wartość w stopniach od -90° do 90° |
fov |
Opcjonalny | określa poziome pole widzenia zdjęcia. Wartość domyślna to 90°. W przypadku widocznego obszaru o stałym rozmiarze pole widzenia można uznać za poziom powiększenia, przy czym mniejsze liczby oznaczają wyższy poziom powiększenia. | Wartość w stopniach (zakres od 10° do 100°) |
center |
Opcjonalny | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej, na przykład: 37.4218,-122.0840 . |
zoom |
Opcjonalny | 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 |
Opcjonalny | Definiuje typ kafelków mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalny | Określa język, który będzie używany w elementach interfejsu oraz do wyświetlania etykiet na fragmentach mapy. Domyślnie użytkownicy zobaczą 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 przypadku zestawu kafelków, będzie używany język domyślny. | |
region |
Opcjonalny | Określa granice i etykiety do wyświetlenia, biorąc pod uwagę wrażliwość geopolityczną. | Akceptuje kod regionu jako dwuznakowy (nienumeryczny) subtag regionu Unicode mapowany na znane dwuznakowe wartości domeny ccTLD („domena najwyższego poziomu”). Sprawdź informacje o zasięgu Google Maps Platform w obsługiwanych regionach. |
Tryb search
Tryb Search
wyświetla wyniki wyszukiwania w widocznym regionie mapy.
Zalecamy definiowanie lokalizacji wyszukiwania przez uwzględnienie lokalizacji w wyszukiwanym haśle (record+stores+in+Seattle
) lub za pomocą parametru center
i zoom
, który powiąże wyszukiwanie.
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 obejmować ograniczenie geograficzne, np. in+Seattle lub near+98033 . |
center |
Opcjonalny | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej, na przykład: 37.4218,-122.0840 . |
zoom |
Opcjonalny | 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 |
Opcjonalny | Definiuje typ kafelków mapy do wczytania. | roadmap (domyślna) lub satellite |
language |
Opcjonalny | Określa język, który będzie używany w elementach interfejsu oraz do wyświetlania etykiet na fragmentach mapy. Domyślnie użytkownicy zobaczą 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 przypadku zestawu kafelków, będzie używany język domyślny. | |
region |
Opcjonalny | Określa granice i etykiety do wyświetlenia, biorąc pod uwagę wrażliwość geopolityczną. | Akceptuje kod regionu jako dwuznakowy (nienumeryczny) subtag regionu Unicode mapowany na znane dwuznakowe wartości domeny ccTLD („domena najwyższego poziomu”). Sprawdź informacje o zasięgu Google Maps Platform w obsługiwanych regionach. |
Parametry identyfikatora miejsca
Interfejs Maps Embed API umożliwia stosowanie identyfikatorów miejsc zamiast podawania nazwy lub adresu miejsca. Identyfikatory miejsc to stabilna metoda unikalnej identyfikacji miejsca. Więcej informacji znajdziesz w dokumentacji interfejsu Google Places API.
Interfejs Maps Embed API akceptuje identyfikatory miejsc dla następujących parametrów adresu URL:
q
origin
destination
waypoints
Aby używać identyfikatora miejsca, musisz najpierw dodać prefiks place_id:
. Następujący kod określa ratusz jako źródło żądania wskazówek dojazdu: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
radius
określa promień (w metrach), w którym należy 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 wyszukiwanie w Street View do wybranych źródeł. Prawidłowe wartości to:default
korzysta z domyślnych źródeł Street View. Wyszukiwanie nie jest ograniczone do konkretnych źródeł.outdoor
ogranicza wyszukiwanie do kolekcji plenerowych. Kolekcje z pomieszczenia nie są uwzględniane w wynikach wyszukiwania. Uwaga: w danej lokalizacji mogą nie istnieć panoramy na zewnątrz. Pamiętaj też, że wyszukiwanie zwróci tylko panoramy, jeśli można określić, czy zdjęcia są wewnątrz czy na zewnątrz. Na przykład zdjęcia sferyczne nie są zwracane, ponieważ nie wiadomo, czy znajdują się w pomieszczeniu czy na zewnątrz.