umieszczanie mapy,

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:

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" 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 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
  &center=-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 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 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.