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:

Dodawanie adresu URL do elementu iframe

Aby użyć interfejsu Maps Embed API na stronie internetowej, ustaw utworzony adres 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 elementu iframe powyżej użyto tych dodatkowych właściwości:

  • Właściwość allowfullscreen, która 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ę elementu 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 elementu iframe, aby dopasować go do struktury i wyglądu swojej witryny, ale uważamy, że użytkownikom łatwiej jest korzystać z większych map. Pamiętaj, że mapy osadzone nie są obsługiwane, jeśli ich rozmiar w dowolnym wymiarze jest mniejszy niż 200 pikseli.

Ograniczenia klucza interfejsu API

Jeśli witryna hostująca 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 elementu iframe właściwość referrerpolicy, jak w przykładzie powyżej, aby wyraźnie zezwolić na wysyłanie do Google nagłówków Referer.

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 określonym miejscu lub pod określonym adresem, np. w pobliżu punktu orientacyjnego, firmy, obiektu geograficznego lub miasta.
  • view: zwraca mapę bez znaczników i wskazówek.
  • directions: wyświetla ścieżkę 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 lokalizacji.
  • search: wyświetla wyniki wyszukiwania w widocznym regionie mapy.

Tryb place

Ten adres URL używa placetrybu mapy, aby wyświetlić znacznik mapy przy 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, adres, kod plus lub identyfikator miejsca zakodowane w adresie URL. Interfejs Maps Embed API obsługuje znaki + i %20 podczas ucieczki od spacji. Na przykład przekształć „City Hall, New York, NY” w City+Hall,New+York,NY lub kody plus „849VCWC8+R9” w 849VCWC8%2BR9.
center Opcjonalny Określa środek widoku mapy. Akceptuje wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840.
zoom Opcjonalny Ustawia początkowy poziom powiększenia mapy. Wartości z zakresu 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 Opcjonalny Określa typ kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalny Określa język, który ma być używany w elementach interfejsu i do wyświetlania etykiet na kafelkach mapy. Domyślnie odwiedzający 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 danego zestawu kafelków, zostanie użyty język domyślny dla tego zestawu.
region Opcjonalny Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako 2-znakowy (niecyfrowy) podtag Unicode regionu, który jest mapowany na znane 2-znakowe wartości ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w szczegółach zasięgu Google Maps Platform.

Tryb view

W tym przykładzie używamy trybu view i opcjonalnego parametru maptype, aby wyświetlić widok satelitarny mapy:

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 wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840.
zoom Opcjonalny Ustawia początkowy poziom powiększenia mapy. Wartości z zakresu 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 Opcjonalny Określa typ kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalny Określa język, który ma być używany w elementach interfejsu i do wyświetlania etykiet na kafelkach mapy. Domyślnie odwiedzający 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 danego zestawu kafelków, zostanie użyty język domyślny dla tego zestawu.
region Opcjonalny Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako 2-znakowy (niecyfrowy) podtag Unicode regionu, który jest mapowany na znane 2-znakowe wartości ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w szczegółach zasięgu Google Maps Platform.

Tryb directions

W tym przykładzie użyto trybu directions, aby wyświetlić trasę między Oslo a Telemarkiem w Norwegii, odległość i czas podróży z pominięciem 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żywać tych parametrów:

Parametr Typ Opis Akceptowane wartości
origin Wymagany Określa punkt początkowy, od którego mają być wyświetlane wskazówki. Nazwa miejsca, adres, kod plus, współrzędne geograficzne lub identyfikator miejsca zakodowane w adresie URL. Interfejs Maps Embed API obsługuje znaki + i %20 podczas ucieczki od spacji. Na przykład przekształć „City Hall, New York, NY” w City+Hall,New+York,NY lub kody plus „849VCWC8+R9” w 849VCWC8%2BR9.
destination Wymagany Określa punkt końcowy trasy. Nazwa miejsca, adres, kod plus, współrzędne geograficzne lub identyfikator miejsca zakodowane w adresie URL. Interfejs Maps Embed API obsługuje znaki + i %20 podczas ucieczki od spacji. Na przykład przekształć „City Hall, New York, NY” w City+Hall,New+York,NY lub kody plus „849VCWC8+R9” w 849VCWC8%2BR9.
waypoints Opcjonalny Określa co najmniej 1 miejsce pośrednie, przez które ma przebiegać trasa między miejscem początkowym a docelowym. Nazwa miejsca, adres lub identyfikator miejsca. Możesz podać wiele punktów pośrednich, rozdzielając miejsca pionową kreską (|) (np. Berlin,Germany|Paris,France). Możesz podać maksymalnie 20 punktów pośrednich.
mode Opcjonalny Określa środek transportu. Jeśli nie określono trybu, interfejs Maps Embed API wyświetli co najmniej 1 najbardziej odpowiedni tryb dla określonej trasy. driving, walking (która preferuje ścieżki dla pieszych i chodniki, jeśli są dostępne), bicycling (która preferuje trasy z wykorzystaniem ścieżek rowerowych i preferowanych ulic, jeśli są dostępne), transit lub flying.
avoid Opcjonalny Określa funkcje, których należy unikać w wskazówkach dojazdu. Pamiętaj, że nie wyklucza to tras, które obejmują funkcje objęte ograniczeniami. Zwiększa to jednak prawdopodobieństwo, że w wynikach pojawią się bardziej korzystne trasy. tolls, ferries lub highways. Jeśli jest wiele wartości, rozdziel je pionowymi kreskami (np.avoid=tolls|highways).
units Opcjonalny Określa metodę pomiaru (metryczną lub imperialną) podczas wyświetlania odległości w wynikach. Jeśli nie podano wartości units, o jednostkach decyduje origin kraj, w którym wysłano zapytanie. metric lub imperial
center Opcjonalny Określa środek widoku mapy. Akceptuje wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840.
zoom Opcjonalny Ustawia początkowy poziom powiększenia mapy. Wartości z zakresu 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 Opcjonalny Określa typ kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalny Określa język, który ma być używany w elementach interfejsu i do wyświetlania etykiet na kafelkach mapy. Domyślnie odwiedzający 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 danego zestawu kafelków, zostanie użyty język domyślny dla tego zestawu.
region Opcjonalny Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako 2-znakowy (niecyfrowy) podtag Unicode regionu, który jest mapowany na znane 2-znakowe wartości ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w szczegółach zasięgu Google Maps Platform.

Tryb streetview

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

Każda panorama Street View zapewnia pełny widok 360° z jednej lokalizacji. Zdjęcia obejmują 360 stopni widoku poziomego (pełny widok dookoła) i 180 stopni widoku pionowego (od góry do dołu). Tryb streetview udostępnia przeglądarkę, która renderuje wynikową panoramę jako sferę z kamerą w środku. Możesz sterować kamerą, aby powiększać i zmieniać jej orientację.

Zobacz poniższą 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 przyjmuje szerokość i długość geograficzną jako wartości rozdzielone przecinkami (46.414382,10.013988). Interfejs API wyświetla panoramę sfotografowaną najbliżej tej lokalizacji. Zdjęcia Street View są okresowo odświeżane, a fotografie mogą być za każdym razem wykonywane z nieco innych pozycji. Dlatego po aktualizacji zdjęć Twoja lokalizacja może zostać przeniesiona do innej panoramy.

  • pano to konkretny identyfikator panoramy. Jeśli podasz pano, możesz też podać location. Wystąpienie location jest używane tylko wtedy, gdy interfejs API nie może znaleźć identyfikatora panoramy.

Te parametry adresu URL są opcjonalne:

Parametr Typ Opis Akceptowane wartości
heading Opcjonalny Określa na kompasie kierunek, w którym zwrócona jest kamera, w stopniach zgodnie z ruchem wskazówek zegara od północy. Wartość w stopniach od -180° do 360°
pitch Opcjonalny określa kąt, w górę lub w dół, pod jakim ustawiona jest kamera. 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 zrobienia zdjęcia. Z tego powodu kąt nachylenia 0° jest często, ale nie zawsze, poziomy. Na przykład obraz zrobiony na wzgórzu będzie prawdopodobnie miał domyślne nachylenie, które nie jest poziome. Wartość w stopniach od -90° do 90°
fov Opcjonalny określa poziome pole widzenia obrazu. Domyślnie jest to 90°. W przypadku widocznego obszaru o stałym rozmiarze pole widzenia można uznać za poziom powiększenia, przy czym mniejsze liczby oznaczają większe powiększenie. Wartość w stopniach w zakresie od 10° do 100°
center Opcjonalny Określa środek widoku mapy. Akceptuje wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840.
zoom Opcjonalny Ustawia początkowy poziom powiększenia mapy. Wartości z zakresu 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 Opcjonalny Określa typ kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalny Określa język, który ma być używany w elementach interfejsu i do wyświetlania etykiet na kafelkach mapy. Domyślnie odwiedzający 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 danego zestawu kafelków, zostanie użyty język domyślny dla tego zestawu.
region Opcjonalny Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako 2-znakowy (niecyfrowy) podtag Unicode regionu, który jest mapowany na znane 2-znakowe wartości ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w szczegółach zasięgu Google Maps Platform.

Tryb search

Search wyświetla wyniki wyszukiwania w widocznym regionie mapy. Zalecamy określenie lokalizacji wyszukiwania przez dodanie jej do wyszukiwanego hasła (record+stores+in+Seattle) lub przez dodanie parametrów 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 Definiuje wyszukiwane słowo. Może to być ograniczenie geograficzne, np. in+Seattle lub near+98033.
center Opcjonalny Określa środek widoku mapy. Akceptuje wartości szerokości i długości geograficznej rozdzielone przecinkami, np. 37.4218,-122.0840.
zoom Opcjonalny Ustawia początkowy poziom powiększenia mapy. Wartości z zakresu 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 Opcjonalny Określa typ kafelków mapy do załadowania. roadmap (domyślnie) lub satellite
language Opcjonalny Określa język, który ma być używany w elementach interfejsu i do wyświetlania etykiet na kafelkach mapy. Domyślnie odwiedzający 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 danego zestawu kafelków, zostanie użyty język domyślny dla tego zestawu.
region Opcjonalny Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako 2-znakowy (niecyfrowy) podtag Unicode regionu, który jest mapowany na znane 2-znakowe wartości ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w szczegółach zasięgu Google Maps Platform.

Parametry identyfikatora miejsca

Interfejs Maps Embed API obsługuje używanie identyfikatorów miejsc zamiast podawania nazwy lub adresu miejsca. Identyfikatory miejsc to stabilny sposób na jednoznaczne identyfikowanie miejsca. Więcej informacji znajdziesz w dokumentacji interfejsu Google Places API.

Interfejs Maps Embed API akceptuje identyfikatory miejsc w przypadku tych parametrów adresu URL:

  • q
  • origin
  • destination
  • waypoints

Aby użyć identyfikatora miejsca, musisz najpierw dodać przedrostek place_id:. Poniższy kod określa ratusz w Nowym Jorku jako punkt początkowy żądania wskazówek dojazdu: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius ustawia promień (w metrach), w którym ma być wyszukiwana panorama wyśrodkowana na podanej 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, a wyszukiwania nie są ograniczone do konkretnych źródeł.
    • outdoor ogranicza wyszukiwanie do kolekcji zewnętrznych. Kolekcje wewnątrz budynków nie są uwzględniane w wynikach wyszukiwania. Pamiętaj, że panoramy zewnętrzne mogą nie być dostępne w przypadku określonej lokalizacji. Pamiętaj też, że wyszukiwanie zwraca tylko panoramy, w przypadku których można określić, czy zostały wykonane w pomieszczeniu, czy na zewnątrz. Na przykład sferyczne zdjęcia nie są zwracane, ponieważ nie wiadomo, czy zostały zrobione w pomieszczeniu czy na zewnątrz.