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 na swojej stronie internetowej używać interfejsu Maps Embed API, ustaw utworzony przez siebie adres 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>

Przykład iframe powyżej używa 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" i style="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łówka Referer w żądaniu, aby ograniczenia klucza API działały prawidłowo.

Możesz zmienić rozmiar elementu iframe, by pasował do struktury i projektu Twojej witryny, ale zauważyliśmy, że użytkownicy zwykle łatwiej wchodzą w interakcje z większymi mapami. Pamiętaj, że umieszczone mapy nie są obsługiwane w żadnym z wymiarów, które mają rozmiar poniżej 200 pikseli.

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ć odrzucenie przez ograniczenie klucza interfejsu API żądania. Aby ograniczenie działało prawidłowo, dodaj do iframe usługę referrerpolicy, tak 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ą ulec zmianie 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: 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 Wymagany Określa lokalizację znacznika mapy. nazwa miejsca zakodowana w adresie URL, adres, kod plusa lub identyfikator miejsca; Interfejs Maps Embed API obsługuje zarówno +, jak i %20 podczas zmiany znaczenia pokoi. 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 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 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ślna) 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 granice i etykiety do wyświetlenia, biorąc pod uwagę wrażliwość geopolityczną. 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 (ccTLD). Zapoznaj się ze szczegółami dotyczącymi obsługiwanych regionów w przypadku platformy 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żyć 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 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ślna) 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 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”). Zapoznaj się ze szczegółami dotyczącymi obsługiwanych regionów w przypadku Google Maps Platform.

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żywać 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 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.
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. Nazwa, 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 Definiuje metodę podróży. Jeśli nie określisz trybu, interfejs Maps Embed API będzie wyświetlać co najmniej jeden z najtrafniejszych trybów na danej trasie. 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ą obiekty objęte ograniczeniami. Kierują one wynik na bardziej korzystne trasy. 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 wartości units, jednostki zostaną określone na podstawie kraju origin w zapytaniu. metric lub imperial
center Opcjonalnie Określa środek widoku mapy. Akceptuje 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 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ślna) 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 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”). Zapoznaj się ze szczegółami dotyczącymi obsługiwanych regionów w przypadku Google Maps Platform.

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. Obrazy zawierają widok poziomy 360° (pełny obrót) oraz widok pionowy 180° (od góry do dołu). 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

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ą 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 podasz pano, 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 Opcjonalnie Określa na kompasie kierunek, w którym zwrócona jest kamera, w stopniach w kierunku zgodnym z porami zegara, licząc 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 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 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, zakres od 10° do 100°
center Opcjonalnie Określa środek widoku mapy. Akceptuje 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 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ślna) 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 granice i etykiety do wyświetlenia, biorąc pod uwagę wrażliwość geopolityczną. Obsługuje kod regionu podany jako dwuznakowy tag regionu w formacie Unicode (niecyfrowym) odpowiadający znanym wartościom 2-znakowym domen krajowych najwyższego poziomu („domeny 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 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 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 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ślna) 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 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 obsługuje używanie identyfikatorów miejsc zamiast nazwy lub adresu. Identyfikatory miejsc to stabilna metoda unikalnej identyfikacji miejsca. Więcej informacji znajdziesz w dokumentacji interfejsu 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ścią domyślną jest 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 pozwala wyszukiwać tylko kolekcje na świeżym powietrzu. Kolekcje z uwzględnieniem środka 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ę wewnątrz czy na zewnątrz.