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 mapy i trybu uzyskiwania zgody.
Dodawanie adresu URL do elementu iframe
Aby użyć interfejsu Maps Embed API na swojej stronie internetowej, ustaw adres URL
został utworzony jako wartość atrybutu src
elementu iframe. Kontroluj rozmiar mapy za pomocą:
atrybutów height
i width
elementu iframe, na przykład:
<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"
służące do usunięcia standardu Obramowanie elementu iframe z całej mapy. - Właściwość
referrerpolicy="no-referrer-when-downgrade"
, która umożliwia do wysłania pełnego adresu URL w postaci nagłówkaReferer
wraz z żądaniem, tak aby Ograniczenia klucza interfejsu API mogą działać prawidłowo.
Możesz zmienić rozmiar elementu iframe, dostosowując go do struktury i projektu Twojej strony ale okazuje się, że użytkownicy zwykle łatwiej radzą sobie z większymi mapami. Pamiętaj, że osadzone mapy nie są obsługiwane w żadnym z tych miejsc: .
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. Ten
może powodować ograniczenie klucza interfejsu API
odrzucić te prośby. Aby ograniczenie działało prawidłowo, dodaj parametr
referrerpolicy
do elementu iframe, jak w przykładzie powyżej, do jawnie
zezwalaj na wysyłanie nagłówków Referer
do Google.
Reklamy na mapie
Interfejs Maps Embed API może obejmować reklamy na mapach. Format reklamy zestaw reklam wyświetlanych na danej mapie może 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. punkt orientacyjny, firmę, obiekt geograficzny lub miejscowość.view
: zwraca mapę bez znaczników i wskazówek.directions
: wyświetla ścieżkę między dwoma lub większą liczbą elementów. określonych punktów na mapie, a także odległość i czas podróży.streetview
: zawiera interaktywne widoki panoramiczne z wyznaczonych lokalizacjach.search
: pokazuje wyniki wyszukiwania na widocznej mapie. i regionie.
Tryb place
Poniższy URL korzysta z trybu mapy place
do wyświetlania znacznika mapy w
Wieża 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 |
Wymagany | 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 ucieczki ze spacji. Na przykład przekonwertuj „City Hall, New York, NY”. do
City+Hall,New+York,NY lub kody plus „849VCWC8+R9” do
849VCWC8%2BR9 |
center |
Opcjonalnie | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego kafelka. | |
region |
Opcjonalnie | Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach. |
Tryb view
Poniższy przykład używa trybu view
i opcjonalnego parametru maptype
do:
wyświetlić widok satelitarny mapy:
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 |
Wymagany | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego kafelka. | |
region |
Opcjonalnie | Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach. |
Tryb directions
W poniższym przykładzie użyto trybu directions
do wyświetlenia ścieżki między Oslowem
czy Telemark w Norwegii, jaka jest odległość i czas podróży, oraz pozwoli uniknąć 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 |
Wymagany | Określa punkt początkowy, z którego mają zostać wyświetlone wskazówki dojazdu. | Nazwa miejsca ze zmianą znaczenia w adresie URL, adres, plus kod, szerokość i długość geograficzna
lub identyfikator miejsca.
Interfejs Maps Embed API obsługuje zarówno + , jak i %20
podczas ucieczki ze spacji. Na przykład przekonwertuj „City Hall, New York, NY”. do
City+Hall,New+York,NY lub kody plus „849VCWC8+R9” do
849VCWC8%2BR9 |
destination |
Wymagany | Określa punkt końcowy trasy dojazdu. | Nazwa miejsca ze zmianą znaczenia w adresie URL, adres, plus kod, szerokość i długość geograficzna
lub identyfikator miejsca.
Interfejs Maps Embed API obsługuje zarówno + , jak i %20
podczas ucieczki ze spacji. Na przykład przekonwertuj „City Hall, New York, NY”. do
City+Hall,New+York,NY lub kody plus „849VCWC8+R9” do
849VCWC8%2BR9 |
waypoints |
Opcjonalnie | Określa jedno lub kilka miejsc pośrednich, z których wyznaczają trasy dojazdu miejsca wylotu i przylotu. | Nazwa, adres lub identyfikator miejsca.
Punkty pośrednie można określać za pomocą pionowej kreski (|).
w osobnych miejscach (np. Berlin,Germany|Paris,France ). Dostępne opcje
określić do 20 punktów pośrednich. |
mode |
Opcjonalnie | Definiuje metodę podróży. Jeśli nie określono żadnego trybu, Interfejs Maps Embed API wyświetli jeden lub więcej trybów, które najlepiej pasują do zapytania wskazanej trasy. | driving , walking (preferowany pieszy
ścieżek i chodników, jeśli są dostępne), bicycling (który
trasami rowerowymi i preferowanymi ulicami, jeśli są dostępne).
transit , czy flying . |
avoid |
Opcjonalnie | Określa funkcje, których należy unikać we wskazówkach dojazdu. Pamiętaj, że nie oznacza to, wykluczając trasy obejmujące obiekty objęte ograniczeniami; prowadzi do stron mogą prowadzić do korzystniejszych tras. | tolls , ferries lub highways .
Kolejne wartości należy rozdzielać pionową kreską (np.
avoid=tolls|highways ). |
units |
Opcjonalnie | Określa metodę pomiaru, metryczną lub imperialną podczas wyświetlania
odległości w wynikach. Jeśli nie podasz units , parametr
Jednostki do użycia określają origin kraj zapytania. |
metric lub imperial |
center |
Opcjonalnie | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego kafelka. | |
region |
Opcjonalnie | Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach. |
Tryb streetview
Interfejs Maps Embed API umożliwia wyświetlanie zdjęć Street View jako i interaktywnych panoram ze wyznaczonych miejsc pokrycia. Użytkownik przesłanych zdjęć sferycznych, Kolekcje specjalne Street View .
Każda panorama Street View zapewnia pełny widok 360 stopni
lokalizacji. Obrazy obejmują widok poziomy (360 stopni)
i 180 stopni w pionie (od prostej do prawej).
Tryb streetview
udostępnia przeglądarkę, która renderuje wynik
jako sferę z aparatem pośrodku. Możesz sterować aparatem
aby 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ę zrobionych w pobliżu tego miejsca. Ponieważ zdjęcia Street View okresowo odświeżane, a zdjęcia mogą być zrobione w innym stopniu może zostać przyciągnięty do innego po zaktualizowaniu zdjęć.pano
to identyfikator konkretnej panoramy. Jeśli podaszpano
możesz też określićlocation
. Obiektlocation
będzie używany tylko wtedy, gdy interfejs API nie będzie mógł znaleźć panoramy ID.
Te parametry adresu URL są opcjonalne:
Parametr | Typ | Opis | Akceptowane wartości |
---|---|---|---|
heading |
Opcjonalnie | Wskazuje na kompasie kierunek kamery podany w stopniach w prawo z północy. | Wartość w stopniach od -180° do 360° |
pitch |
Opcjonalnie | określa kąt obrotu kamery (w górę lub w dół). Wartości dodatnie będą kątowe kamera w górę, a wartości ujemne – w dół. domyślny kąt 0° jest ustawiany w zależności od położenia kamery podczas zdjęcia. Z tego powodu często jest o 0°, ale nie zawsze w poziomie. Na przykład zdjęcie zrobione ze wzgórza może nie będą mieć domyślnego kąta nachylenia. | Wartość w stopniach od -90° do 90° |
fov |
Opcjonalnie | określa poziome pole widzenia zdjęcia. it domyślnie wynosi 90°. W widocznym obszarze o stałym rozmiarze pole widok można uznać za poziom powiększenia, gdzie mniejsze liczby oznaczają i zwiększyć powiększenie. | Wartość w stopniach (zakres od 10° do 100°) |
center |
Opcjonalnie | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego kafelka. | |
region |
Opcjonalnie | Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach. |
Tryb search
Tryb Search
wyświetla wyniki wyszukiwania w widocznym regionie mapy.
Zalecamy definiowanie lokalizacji wyszukiwania za pomocą
uwzględniając lokalizację w wyszukiwanym haśle (record+stores+in+Seattle
) lub
dodając parametry center
i zoom
, które powiążą 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 |
Wymagany | Definiuje wyszukiwane hasło. | Może to być ograniczenie geograficzne,
na przykład in+Seattle lub near+98033 . |
center |
Opcjonalnie | Określa środek widoku mapy. | Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji. |
maptype |
Opcjonalnie | Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego kafelka. | |
region |
Opcjonalnie | Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. | Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach. |
Parametry identyfikatora miejsca
Interfejs Maps Embed API obsługuje stosowanie identyfikatorów miejsc zamiast podawania identyfikatora nazwę lub adres miejsca. Identyfikatory miejsc to stabilny sposób zidentyfikować miejsce. Więcej informacji znajdziesz w dokumentacji interfejsu Google Places API.
Interfejs Maps Embed API akceptuje identyfikatory miejsc dla następującego adresu URL parametry:
q
origin
destination
waypoints
Aby używać identyfikatora miejsca, musisz najpierw dodać prefiks place_id:
.
następujący kod określa ratusz jako punkt początkowy trasy dojazdu w Nowym Jorku
żądanie: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
.
Funkcja
radius
ustawia promień (w metrach), w którym będą wyszukiwane panoramę wyśrodkowaną na danej szerokości i długości geograficznej. Prawidłowe wartości są nieujemnymi liczbami całkowitymi. 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. Liczba wyszukiwań jest nie tylko do konkretnych źródeł.outdoor
ogranicza wyszukiwanie do kolekcji plenerowych. Do użytku wewnątrz kolekcje nie są uwzględniane w wynikach wyszukiwania. Pamiętaj, że panoramy na zewnątrz może nie istnieć w określonej lokalizacji. Pamiętaj też, że wyszukiwanie zwraca panoramy, jeśli można określić, czy są one wewnątrz i na zewnątrz. Na przykład obiekty PhotoSphere nie są zwracane, ponieważ są nieznane zarówno wewnątrz, jak i na zewnątrz.