umieszczanie mapy,

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Ten przewodnik pokazuje, jak umieścić interaktywną mapę na stronie internetowej.

Tworzenie adresu URL interfejsu Maps embed API

Poniżej znajduje się 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 na temat pobierania klucza interfejsu API.
  • PARAMETERS z wymaganymi i opcjonalnymi parametrami trybu mapy.

Dodawanie adresu URL do elementu iframe

Aby użyć interfejsu API umieszczania na stronie 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, 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>

Powyższy przykład elementu iframe korzysta z dodatkowych właściwości:

  • Właściwość allowfullscreen umożliwia wyświetlanie określonych części mapy na pełnym ekranie.
  • Właściwości frameborder="0" i style="border:0" umożliwiają usunięcie standardowego obramowania elementu iframe z mapy.
  • Właściwość referrerpolicy="no-referrer-when-downgrade" umożliwia przeglądarce wysyłanie pełnego adresu URL w nagłówku Referer z żądaniem, aby ograniczenia klucza interfejsu API działały prawidłowo.

Możesz zmienić rozmiar elementu iframe, tak aby pasował do struktury i projektu Twojej witryny, ale użytkownikom łatwiej jest korzystać z większych map. Warto pamiętać, że umieszczone mapy nie są obsługiwane w przypadku rozmiaru mniejszego niż 200 pikseli.

Ograniczenia klucza interfejsu API

Jeśli metatag witryny ma ustawiony referrer metatag no-referrer lub same-origin, przeglądarka nie wysyła nagłówka Referer do Google. Może to spowodować, że ograniczenia klucza interfejsu API będą odrzucać żądania. Aby ograniczenie działało prawidłowo, dodaj do elementu iframe właściwość referrerpolicy (jak w powyższym przykładzie), by wyraźnie zezwolić na wysyłanie nagłówków Referer do Google.

Reklamy na mapie

Interfejs API Map Google do umieszczania elementów może zawierać reklamy wyświetlane na mapie. Format 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 określonym miejscu lub adresie, takim jak punkt orientacyjny, firma, obiekt geograficzny lub miasto.
  • view: zwraca mapę bez znaczników lub wskazówek dojazdu.
  • 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: pokazuje interaktywne widoki panoramiczne z wyznaczonych lokalizacji.
  • search: pokazuje wyniki wyszukiwania w widocznym obszarze mapy.

Tryb place

Ten adres URL używa trybu mapy place do wyświetlania znacznika mapy w 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, adres i kod Plus Code lub identyfikator miejsca ze zmianą znaczenia. Podczas zmiany znaczenia spacje w interfejsie Maps embed API obsługują zarówno właściwość +, jak i %20. Na przykład przekonwertuj „City Hall, New York, NY” na City+Hall,New+York,NY lub kody Plus „849VCWC8+R9” na 849VCWC8%2BR9.
center Opcjonalna Określa środek widoku mapy. Akceptuje wartości szerokości i długości geograficznej rozdzielone przecinkami, na przykład: 37.4218,-122.0840.
zoom Opcjonalna Określa początkowy poziom powiększenia mapy. Wartości 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 Opcjonalna Określa typ kafelków mapy do wczytania. roadmap (domyślnie) lub satellite
language Opcjonalna Określa język używany w przypadku elementów interfejsu i wyświetlania etykiet na kafelkach mapy. Domyślnie użytkownicy wyświetlają 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 przez zestaw kafelków, używany będzie domyślny język tego zestawu.
region Opcjonalna Definiuje odpowiednie granice i etykiety do wyświetlania na podstawie wrażliwości geograficznej. Akceptuje kod regionu określony jako dwuznakowy (nieliczbowy) identyfikator podkodu regionu unicode do znanych już dwuznakowych domen ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w artykule dotyczącym pokrycia zasięgu Google Maps Platform.

Tryb view

W tym przykładzie użyto widoku view i opcjonalnego parametru maptype do wyświetlenia widoku satelitarnego 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ż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, na przykład: 37.4218,-122.0840.
zoom Opcjonalna Określa początkowy poziom powiększenia mapy. Wartości 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 Opcjonalna Określa typ kafelków mapy do wczytania. roadmap (domyślnie) lub satellite
language Opcjonalna Określa język używany w przypadku elementów interfejsu i wyświetlania etykiet na kafelkach mapy. Domyślnie użytkownicy wyświetlają 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 przez zestaw kafelków, używany będzie domyślny język tego zestawu.
region Opcjonalna Definiuje odpowiednie granice i etykiety do wyświetlania na podstawie wrażliwości geograficznej. Akceptuje kod regionu określony jako dwuznakowy (nieliczbowy) identyfikator podkodu regionu unicode do znanych już dwuznakowych domen ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w artykule dotyczącym pokrycia zasięgu Google Maps Platform.

Tryb directions

W przykładzie poniżej użyto trybu directions do wyświetlenia trasy między Oslową i Telewizorem, Norwegią, odległością i czasem podróży, aby 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, od którego mają być wyświetlane wskazówki dojazdu. Nazwa, adres i kod miejsca ze zmianą znaczenia oraz adres URL, współrzędne geograficzne lub identyfikator miejsca. Podczas zmiany znaczenia spacje w interfejsie Maps embed API obsługują zarówno właściwość +, jak i %20. Na przykład przekonwertuj „City Hall, New York, NY” na City+Hall,New+York,NY lub kody Plus „849VCWC8+R9” na 849VCWC8%2BR9.
destination Wymagany Określa punkt końcowy wskazówek. Nazwa, adres i kod miejsca ze zmianą znaczenia oraz adres URL, współrzędne geograficzne lub identyfikator miejsca. Podczas zmiany znaczenia spacje w interfejsie Maps embed API obsługują zarówno właściwość +, jak i %20. Na przykład przekonwertuj „City Hall, New York, NY” na City+Hall,New+York,NY lub kody Plus „849VCWC8+R9” na 849VCWC8%2BR9.
waypoints Opcjonalna Określa co najmniej 1 miejsce docelowe na trasie między miejscem wylotu a miejscem docelowym. Nazwa, adres lub identyfikator miejsca. Wiele punktów pośrednich możesz określić, rozdzielając je pionową kreską (|), np. Berlin,Germany|Paris,France. Możesz określić maksymalnie 20 punktów pośrednich.
mode Opcjonalna Określa sposób podróżowania. Jeśli nie określisz trybu, interfejs API umieszczania na stronie wyświetli co najmniej 1 najbardziej odpowiedni tryb na określonej trasie. driving, walking (preferowane ścieżki dla pieszych i chodników, jeśli są dostępne), bicycling (w przypadku których są dostępne ścieżki rowerowe i preferowane ulice, jeśli są dostępne), transit lub flying.
avoid Opcjonalna Określa obiekty, których należy unikać na trasie. Pamiętaj, że nie wyklucza to tras, które zawierają funkcje z ograniczonym dostępem – powoduje, że wynik uzyskuje lepsze trasy. tolls, ferries lub highways. Wiele wartości oddziel pionową kreską (np. avoid=tolls|highways).
units Opcjonalna Określa metodę pomiaru, dane lub imperialne podczas wyświetlania odległości w wynikach. Jeśli nie określono jednostki units, jednostki origin mają być określone na podstawie kraju w zapytaniu. metric lub imperial
center Opcjonalna Określa środek widoku mapy. Akceptuje wartości szerokości i długości geograficznej rozdzielone przecinkami, na przykład: 37.4218,-122.0840.
zoom Opcjonalna Określa początkowy poziom powiększenia mapy. Wartości 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 Opcjonalna Określa typ kafelków mapy do wczytania. roadmap (domyślnie) lub satellite
language Opcjonalna Określa język używany w przypadku elementów interfejsu i wyświetlania etykiet na kafelkach mapy. Domyślnie użytkownicy wyświetlają 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 przez zestaw kafelków, używany będzie domyślny język tego zestawu.
region Opcjonalna Definiuje odpowiednie granice i etykiety do wyświetlania na podstawie wrażliwości geograficznej. Akceptuje kod regionu określony jako dwuznakowy (nieliczbowy) identyfikator podkodu regionu unicode do znanych już dwuznakowych domen ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w artykule dotyczącym pokrycia zasięgu Google Maps Platform.

Tryb streetview

Interfejs API Osadzenia Map umożliwia wyświetlanie zdjęć Street View jako interaktywnych widoków z wyznaczonych lokalizacji na całym obszarze pokrycia. Dostępne są również zdjęcia sferyczne przesłane przez użytkowników i specjalne kolekcje Street View.

Każda panorama Street View zapewnia pełny widok 360 stopni z jednego miejsca. Obrazy zawierają 360 stopni w orientacji poziomej i 180 stopni (od góry do dołu). Tryb streetview udostępnia przeglądającemu, który renderuje powstałą panoramę, jako sferę z aparatem pośrodku. Możesz zmieniać rozmiar aparatu 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 rozdzielone przecinkami (46.414382,10.013988). Interfejs API wyświetli panoramę sfotografowaną najbliżej tej lokalizacji. Zdjęcia Street View są okresowo odświeżane, a za każdym razem mogą być wykonywane z nieco innych pozycji, dlatego po ich zaktualizowaniu lokalizacja może zostać sfotografowana w inny sposób.

  • pano to konkretny identyfikator panoramy. Jeśli określisz właściwość pano, możesz też podać location. location będzie używany tylko wtedy, gdy interfejs API nie będzie mógł znaleźć identyfikatora panoramy.

Te parametry adresu URL są opcjonalne:

Parametr Typ Opis Akceptowane wartości
heading Opcjonalna Wskazuje na kompasie kierunek aparatu w stopniach od północy od północy. Wartość w stopniach od –180° do 360°
pitch Opcjonalna 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 na podstawie pozycji aparatu podczas robienia zdjęcia. Z tego powodu nachylenie równa 0° jest często, ale nie zawsze, poziomo. Na przykład obraz zrobiony na wzgórzu prawdopodobnie pokazuje domyślny kąt, który nie jest poziomy. Wartość w stopniach od –90° do 90°
fov Opcjonalna określa poziome pole widoku obrazu. Wartość domyślna to 90°. W przypadku widocznego obszaru pole widoku można uznać za poziom powiększenia, a mniejsze wartości oznaczają wyższy poziom powiększenia. Wartość w stopniach, od 10° do 100°
center Opcjonalna Określa środek widoku mapy. Akceptuje wartości szerokości i długości geograficznej rozdzielone przecinkami, na przykład: 37.4218,-122.0840.
zoom Opcjonalna Określa początkowy poziom powiększenia mapy. Wartości 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 Opcjonalna Określa typ kafelków mapy do wczytania. roadmap (domyślnie) lub satellite
language Opcjonalna Określa język używany w przypadku elementów interfejsu i wyświetlania etykiet na kafelkach mapy. Domyślnie użytkownicy wyświetlają 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 przez zestaw kafelków, używany będzie domyślny język tego zestawu.
region Opcjonalna Definiuje odpowiednie granice i etykiety do wyświetlania na podstawie wrażliwości geograficznej. Akceptuje kod regionu określony jako dwuznakowy (nieliczbowy) identyfikator podkodu regionu unicode do znanych już dwuznakowych domen ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w artykule dotyczącym pokrycia zasięgu Google Maps Platform.

Tryb search

Tryb Search wyświetla wyniki wyszukiwania dla widocznego obszaru mapy. Zalecamy określenie lokalizacji na potrzeby wyszukiwania przez uwzględnienie lokalizacji w wyszukiwanym haśle (record+stores+in+Seattle) lub przez użycie parametru center i zoom, aby powiązać 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 Określa wyszukiwane hasło. Może obejmować ograniczenie geograficzne, np. in+Seattle lub near+98033.
center Opcjonalna Określa środek widoku mapy. Akceptuje wartości szerokości i długości geograficznej rozdzielone przecinkami, na przykład: 37.4218,-122.0840.
zoom Opcjonalna Określa początkowy poziom powiększenia mapy. Wartości 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 Opcjonalna Określa typ kafelków mapy do wczytania. roadmap (domyślnie) lub satellite
language Opcjonalna Określa język używany w przypadku elementów interfejsu i wyświetlania etykiet na kafelkach mapy. Domyślnie użytkownicy wyświetlają 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 przez zestaw kafelków, używany będzie domyślny język tego zestawu.
region Opcjonalna Definiuje odpowiednie granice i etykiety do wyświetlania na podstawie wrażliwości geograficznej. Akceptuje kod regionu określony jako dwuznakowy (nieliczbowy) identyfikator podkodu regionu unicode do znanych już dwuznakowych domen ccTLD („domena najwyższego poziomu”). Listę obsługiwanych regionów znajdziesz w artykule dotyczącym pokrycia zasięgu Google Maps Platform.

Parametry identyfikatora miejsca

Interfejs API Umieść na stronie obsługuje używanie identyfikatorów miejsc zamiast podawania nazwy lub adresu miejsca. Identyfikatory miejsc to stabilny sposób unikalnego identyfikowania miejsca. Więcej informacji znajdziesz w dokumentacji interfejsu API Miejsc Google.

Interfejs Maps embed API akceptuje identyfikatory miejsc dotyczące następujących parametrów adresu URL:

  • q
  • origin
  • destination
  • waypoints

Aby używać identyfikatora miejsca, musisz najpierw dodać jego prefiks place_id:. Ten kod wskazuje ratusz w Nowym Jorku jako punkt początkowy żądania trasy dojazdu: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius ustawia promień, podany w metrach, w którym można wyszukać panoramę, wyśrodkowaną 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 Street View do wybranych źródeł. Prawidłowe wartości to:

    • default używa domyślnych źródeł Street View; wyszukiwania nie są ograniczone do konkretnych źródeł.
    • outdoor ogranicza wyszukiwanie do kolekcji na zewnątrz. Kolekcje zewnętrzne nie są uwzględniane w wynikach wyszukiwania. Pamiętaj, że w przypadku danej lokalizacji panoramy mogą nie być dostępne. Pamiętaj, że wyszukiwanie zwraca tylko te miejsca, w których można określić, czy kryją się w pomieszczeniach czy na zewnątrz. Na przykład Fotoksiążki nie są zwracane, ponieważ nie wiadomo, czy są one wewnątrz, czy na zewnątrz.