umieszczanie mapy,

Z tego przewodnika dowiesz się, jak osadzić interaktywną mapę na stronie internetowej.

Tworzenie adresu URL interfejsu Maps Embed API

Oto 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 w trybie mapy.
  • YOUR_API_KEY za pomocą klucza interfejsu API. Więcej informacji znajdziesz w artykule Pobieranie klucza interfejsu API.
  • PARAMETERS z wymaganymi i opcjonalnymi parametrami dla trybu mapy.

Dodawanie adresu URL do elementu iframe

Aby na swojej stronie internetowej używać interfejsu Maps Embed API, ustaw utworzony przez siebie adres URL jako wartość atrybutu src elementu iframe. Rozmiar mapy możesz kontrolować za pomocą atrybutów iframe height i width, 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>

Przykładowy kod iframe powyżej używa dodatkowych właściwości:

  • Właściwość allowfullscreen umożliwia wyświetlanie niektórych części mapy na pełnym ekranie.
  • Właściwości frameborder="0" i style="border:0", aby usunąć standardową ramkę iframe wokół mapy.
  • Właściwość referrerpolicy="no-referrer-when-downgrade", która umożliwia przeglądarce wysyłanie pełnego adresu URL jako nagłówka Referer w żądaniu, aby ograniczenia klucza API działały prawidłowo.

Możesz zmienić rozmiar iframe, aby dopasować go do struktury i projektu swojej witryny, ale według naszych badań użytkownicy łatwiej korzystają z większych map. Pamiętaj, że mapy osadzone o rozmiarach mniejszych niż 200 pikseli w każdym wymiarze nie są obsługiwane.

Ograniczenia klucza interfejsu API

Jeśli witryna hostingowa ma metatag referrer ustawiony na no-referrer lub same-origin, przeglądarka nie wyśle do Google nagłówka Referer. Może to spowodować, że ograniczenie klucza interfejsu API odrzuci żądania. Aby ograniczenie działało prawidłowo, dodaj do iframe usługę referrerpolicy, jak w przykładzie powyżej, aby wyraźnie zezwolić na wysyłanie nagłówków Referer do Google.

Reklamy na mapie

Interfejs Maps Embed API może zawierać reklamy na mapie. Format reklamy i zestaw reklam wyświetlanych na danej mapie mogą się zmieniać bez powiadomienia.

Wybieranie trybów mapy

W adresie URL żądania możesz określić jeden z tych trybów mapy:

  • place: wyświetla pinezkę na mapie w konkretnym miejscu lub pod konkretnym adresem, np. w miejscu orientacyjnym, firmie, obiekcie geograficznym lub mieście.
  • view: zwraca mapę bez znaczników ani wskazówek.
  • directions: wyświetla trasę między co najmniej 2 określonymi punktami na mapie, a także odległość i czas podróży.
  • streetview: wyświetla interaktywne widoki panoramiczne z wybranych miejsc.
  • search: wyświetla wyniki wyszukiwania w widocznym regionie mapy.

Tryb place

Ten adres URL używa trybu mapy place, aby wyświetlić znacznik 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żywać tych parametrów:

Parametr Typ Opis Akceptowane wartości
q Wymagany Określa lokalizację znacznika na mapie. nazwa miejsca zakodowana w adresie URL, adres, kod Plusa lub identyfikator miejsca; Interfejs Maps Embed API obsługuje zarówno +, jak i %20 podczas ucieczki z przestrzeni. Na przykład zmienić „City Hall, New York, NY” na City+Hall,New+York,NY lub kody plusa „849VCWC8+R9” na 849VCWC8%2BR9.
center Opcjonalnie Określa środek widoku mapy. Akceptuje rozdzielone 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 od 0 (cały świat) do 21 (poszczególne budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji.
maptype Opcjonalnie Określa typy kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalnie Określa język używany w przypadku elementów interfejsu i etykiet na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków z krajami. Jeśli wybrany język nie jest obsługiwany w przypadku zestawu, zostanie użyty domyślny język tego zestawu.
region Opcjonalnie Określa odpowiednie granice i etykietki do wyświetlenia na podstawie wrażliwości geopolitycznej. Obsługuje kod regionu podany jako dwuznakowy (niecyfrowy) tag regionu w formacie Unicode, który jest mapowany na znane wartości 2-znakowe domen krajowych najwyższego poziomu („domeny najwyższego poziomu”). Zapoznaj się ze szczegółami dotyczącymi obsługiwanych regionów w Google Maps Platform.

Tryb view

W tym przykładzie do wyświetlenia widoku satelitarnego mapy użyto trybu view i opcjonalnego parametru maptype:

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

Możesz używać tych parametrów:

Parametr Typ Opis Akceptowane wartości
center Wymagany Określa środek widoku mapy. Akceptuje rozdzielone 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 od 0 (cały świat) do 21 (poszczególne budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji.
maptype Opcjonalnie Określa typy kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalnie Określa język używany w przypadku elementów interfejsu i etykiet na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków z krajami. Jeśli wybrany język nie jest obsługiwany w przypadku zestawu, zostanie użyty domyślny język tego zestawu.
region Opcjonalnie Określa odpowiednie granice i etykietki do wyświetlenia na podstawie wrażliwości geopolitycznej. Obsługuje kod regionu podany jako dwuznakowy (niecyfrowy) tag regionu w formacie Unicode, który jest mapowany na znane wartości 2-znakowe domen krajowych najwyższego poziomu („domeny najwyższego poziomu”). Zapoznaj się ze szczegółami dotyczącymi obsługiwanych regionów w Google Maps Platform.

Tryb directions

W tym przykładzie tryb directions służy do wyświetlania ścieżki między Oslo a Telemark w Norwegii, odległości i czasu podróży bez opłat za przejazd 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żywać tych parametrów:

Parametr Typ Opis Akceptowane wartości
origin Wymagany Określa punkt początkowy, z którego mają być wyświetlane wskazówki. nazwa miejsca zakodowana w adresie URL, adres, kod plusa, 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 ucieczki od spacji. Na przykład zmienić „City Hall, New York, NY” na City+Hall,New+York,NY lub kody plusa „849VCWC8+R9” na 849VCWC8%2BR9.
destination Wymagany Określa punkt końcowy trasy. nazwa miejsca zakodowana w adresie URL, adres, kod plusa, 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 ucieczki z przestrzeni. Na przykład zmienić „City Hall, New York, NY” na City+Hall,New+York,NY lub kody plusa „849VCWC8+R9” na 849VCWC8%2BR9.
waypoints Opcjonalnie Określa co najmniej 1 miejsce pośrednie, aby wyznaczyć trasę między miejscem wylotu a celem podróży. nazwę, adres lub identyfikator miejsca, Możesz określić wiele punktów pośrednich, używając znaku pionowego (|) do rozdzielania miejsc (np. Berlin,Germany|Paris,France). Możesz określić maksymalnie 20 punktów pośrednich.
mode Opcjonalnie Określa sposób podróży. Jeśli nie zostanie określony żaden tryb, Maps Embed API wyświetli co najmniej 1 z najbardziej odpowiednich trybów dla określonej trasy. driving, walking (preferuje ścieżki dla pieszych i chodniki, jeśli są dostępne), bicycling (preferuje ścieżki rowerowe i ulice, jeśli są dostępne), transit lub flying.
avoid Opcjonalnie Określa funkcje, których należy unikać na trasie. Pamiętaj, że nie wyklucza to tras, które obejmują funkcje objęte ograniczeniami. Wyniki są jedynie przybliżone do bardziej korzystnych tras. tolls, ferries lub highways. Poszczególne wartości rozdziel znakami pionowej kreski (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 wartości units, jednostki zostaną określone na podstawie kraju origin w zapytaniu. metric lub imperial
center Opcjonalnie Określa środek widoku mapy. Akceptuje rozdzielone 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 od 0 (cały świat) do 21 (poszczególne budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji.
maptype Opcjonalnie Określa typy kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalnie Określa język używany w przypadku elementów interfejsu i etykiet na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków z krajami. Jeśli wybrany język nie jest obsługiwany w przypadku zestawu, zostanie użyty domyślny język tego zestawu.
region Opcjonalnie Określa odpowiednie granice i etykietki do wyświetlenia na podstawie wrażliwości geopolitycznej. Obsługuje kod regionu podany jako dwuznakowy (niecyfrowy) tag regionu w formacie Unicode, który jest mapowany na znane wartości 2-znakowe domen krajowych najwyższego poziomu („domeny najwyższego poziomu”). Zapoznaj się ze szczegółami dotyczącymi obsługiwanych regionów w Google Maps Platform.

Tryb streetview

Interfejs Maps Embed API umożliwia wyświetlanie zdjęć Street View jako interaktywnych panoram z wybranych miejsc w obszarze objętym zasięgiem. Dostępne są też zdjęcia sferyczne przesłane przez użytkowników i specjalne kolekcje Street View.

Każda panorama Street View obejmuje pełny widok 360° z jednego miejsca. Obrazy zawierają widok poziomy 360° (pełny obrót) oraz widok pionowy 180° (od góry do dołu). Tryb streetview udostępnia odtwarzacz, który renderuje powstałą panoramę jako kulę z kamerą w środku. Możesz manipulować kamerą, aby kontrolować powiększenie i orientację.

Zobacz 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

Jeden z tych parametrów adresu URL jest wymagany:

  • Parametr location przyjmuje szerokość i długość geograficzną jako wartości rozdzielone przecinkami (46.414382,10.013988). Interfejs API wyświetli panoramę sfotografowaną najbliżej tej lokalizacji. Zdjęcia Street View są okresowo aktualizowane, a zdjęcia mogą być robione z trochę innych pozycji za każdym razem, dlatego po aktualizacji zdjęć Twoja lokalizacja może się zmienić na inną panoramę.

  • pano to identyfikator konkretnej panoramy. Jeśli podasz parametr pano, możesz też podać parametr location. Argument location będzie używany tylko wtedy, gdy interfejs API nie znajdzie identyfikatora panoramy.

Te parametry adresu URL są opcjonalne:

Parametr Typ Opis Akceptowane wartości
heading Opcjonalnie Określa na kompasie kierunek, w którym zwrócona jest kamera, w stopniach w zgodnym z zegarzem kierunku od 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 powodują obrót kamery w górę, a ujemne w dół. Domyślny kąt nachylenia 0° jest ustawiany na podstawie pozycji kamery w momencie rejestrowania obrazu. Z tego powodu kąt 0° jest często, ale nie zawsze, poziomy. Na przykład zdjęcie zrobione na wzgórzu będzie miało domyślny kąt nachylenia, który nie będzie poziomy. Wartość w stopniach od -90° do 90°
fov Opcjonalnie określa poziome pole widzenia obrazu. Domyślnie wynosi 90°. W przypadku widocznego obszaru o stałym rozmiarze pole widzenia może być uważane za poziom powiększenia, przy czym mniejsze liczby oznaczają większy poziom powiększenia. Wartość w stopniach w zakresie 10–100°
center Opcjonalnie Określa środek widoku mapy. Akceptuje rozdzielone 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 od 0 (cały świat) do 21 (poszczególne budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji.
maptype Opcjonalnie Określa typy kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalnie Określa język używany w przypadku elementów interfejsu i etykiet na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków z krajami. Jeśli wybrany język nie jest obsługiwany w przypadku zestawu, zostanie użyty domyślny język tego zestawu.
region Opcjonalnie Określa odpowiednie granice i etykietki do wyświetlenia na podstawie wrażliwości geopolitycznej. Obsługuje kod regionu podany jako dwuznakowy (niecyfrowy) tag regionu w formacie Unicode, który jest mapowany na znane wartości 2-znakowe domen krajowych najwyższego poziomu („domeny najwyższego poziomu”). Zapoznaj się ze szczegółami dotyczącymi obsługiwanych regionów w Google Maps Platform.

Tryb search

Tryb Search wyświetla wyniki wyszukiwania w całym widocznym regionie mapy. Zalecamy określenie lokalizacji wyszukiwania, podając lokalizację w wyszukiwanym haśle (record+stores+in+Seattle) lub dołączając parametr center i zoom, aby ograniczyć wyszukiwanie.

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

Możesz używać tych parametrów:

Parametr Typ Opis Akceptowane wartości
q Wymagany Określa wyszukiwane słowo. Może to obejmować ograniczenie geograficzne, takie jak in+Seattle lub near+98033.
center Opcjonalnie Określa środek widoku mapy. Akceptuje rozdzielone 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 od 0 (cały świat) do 21 (poszczególne budynki). Górny limit może się różnić w zależności od danych mapy dostępnych w wybranej lokalizacji.
maptype Opcjonalnie Określa typy kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalnie Określa język używany w przypadku elementów interfejsu i etykiet na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę w swoim języku. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków z krajami. Jeśli wybrany język nie jest obsługiwany w przypadku zestawu, zostanie użyty domyślny język tego zestawu.
region Opcjonalnie Określa odpowiednie granice i etykietki do wyświetlenia na podstawie wrażliwości geopolitycznej. Obsługuje kod regionu podany jako dwuznakowy (niecyfrowy) tag regionu w formacie Unicode, który jest mapowany na znane wartości 2-znakowe domen krajowych najwyższego poziomu („domeny najwyższego poziomu”). Zapoznaj się ze szczegółami dotyczącymi obsługiwanych regionów w Google Maps Platform.

Parametry identyfikatora miejsca

Interfejs Maps Embed API obsługuje używanie identyfikatorów miejsc zamiast nazwy lub adresu. Identyfikatory miejsc to stabilny sposób jednoznacznego identyfikowania miejsca. Więcej informacji znajdziesz w dokumentacji interfejsu 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ć prefiks place_id:. Ten kod wskazuje nowojorską City Hall jako punkt początkowy prośby o wyznaczenie trasy: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius ustawia promień (w metrach) wyszukiwania panoramy, wyśrodkowanej na danej szerokości i długości geograficznej. Prawidłowe wartości to nieujemne liczby całkowite. Wartością domyślną jest 50.

  • source ogranicza wyszukiwania w Street View do wybranych źródeł. Prawidłowe wartości to:

    • default korzysta z domyślnych źródeł Street View; wyszukiwania nie są ograniczone do konkretnych źródeł.
    • outdoor ogranicza wyszukiwanie do kolekcji na zewnątrz. Kolekcje z usługami w pomieszczeniach nie są uwzględniane w wynikach wyszukiwania. Pamiętaj, że w przypadku wybranej lokalizacji panoramy zewnętrzne mogą nie istnieć. Pamiętaj też, że wyszukiwanie zwraca tylko panoramy, w przypadku których można określić, czy są one wewnątrz czy na zewnątrz. Na przykład nie zwracamy zdjęć panoramicznych, ponieważ nie wiadomo, czy zostały one zrobione w pomieszczeniu, czy na zewnątrz.