umieszczanie mapy,

W tym przewodniku pokazujemy, 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 za pomocą trybu mapy.
  • YOUR_API_KEY za pomocą klucza interfejsu API. Więcej informacji znajdziesz w artykule o pobieraniu klucza interfejsu API.
  • PARAMETERS z wymaganymi i opcjonalnymi parametrami trybu mapy.

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. 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 iframe powyżej użyto dodatkowych właściwości:

  • Właściwość allowfullscreen umożliwiająca wyświetlanie niektórych fragmentów mapy na pełnym ekranie.
  • Właściwości frameborder="0" i style="border:0" do usuwania z mapy standardowego obramowania iframe.
  • Właściwość referrerpolicy="no-referrer-when-downgrade", która umożliwia przeglądarce wysyłanie pełnego adresu URL w postaci nagłówka Referer z żądaniem, aby ograniczenia dotyczące klucza interfejsu API działały prawidłowo.

Możesz zmienić rozmiar elementu iframe, aby pasował do struktury i projektu swojej witryny, ale okazuje się, że zwykle łatwiej jest wchodzić w interakcje z większymi mapami. Pamiętaj, że osadzone mapy nie są obsługiwane w żadnym z wymiarów poniżej 200 pikseli.

Ograniczenia klucza interfejsu API

Jeśli w witrynie hostującej metatag referrer jest ustawiony na no-referrer lub same-origin, przeglądarka nie wyśle nagłówka Referer do Google. Może to spowodować odrzucenie żądań przez ograniczenie klucza interfejsu API. Aby ograniczenie działało prawidłowo, dodaj do elementu iframe właściwość referrerpolicy (jak w przykładzie powyżej), by wyraźnie zezwolić na wysyłanie do Google nagłówków Referer.

Reklamy na mapie

Interfejs Maps Embed API może obsługiwać reklamy wyświetlane na mapie. Format reklamy i zestaw reklam wyświetlanych na danej mapie mogą ulec zmianie bez powiadomienia.

Wybieranie trybów mapy

Możesz wybrać jeden z następujących trybów mapy do użycia w adresie URL żądania:

  • place: umożliwia wyświetlanie pinezki na mapie w określonym miejscu lub adresie, np. punkcie orientacyjnym, firmie, obiekcie geograficznym lub mieście.
  • view: zwraca mapę bez znaczników i wskazówek dojazdu.
  • directions: pokazuje ścieżkę między co najmniej 2 punktami na mapie, a także odległość i czas podróży.
  • streetview: pokazuje interaktywne, panoramiczne widoki z wyznaczanych lokalizacji.
  • search: pokazuje wyniki wyszukiwania w widocznym regionie mapy.

Tryb place

Ten URL wyświetla znacznik mapy na wieży Eiffla w trybie mapy place:

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, adres, kod lub identyfikator miejsca ze zmianą znaczenia w adresie URL. Interfejs Maps Embed API obsługuje zarówno kod +, jak i %20 podczas zmiany znaczenia spacji. Na przykład przekonwertuj nazwę „City Hall, New York, NY” na City+Hall,New+York,NY lub użyj kodu plus „849VCWC8+R9” na numer 849VCWC8%2BR9.
center Opcjonalnie Definiuje środek widoku mapy. Może przyjmować 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 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 Opcjonalnie Definiuje typ elementów mapy do wczytania. roadmap (domyślna) lub satellite
language Opcjonalnie Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą 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 zestawie kafelków, zostanie użyty domyślny język tego zbioru.
region Opcjonalnie Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony.

Tryb view

W tym przykładzie do wyświetlania widoku satelitarnego mapy używany jest tryb view i opcjonalny parametr 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 Definiuje środek widoku mapy. Może przyjmować 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 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 Opcjonalnie Definiuje typ elementów mapy do wczytania. roadmap (domyślna) lub satellite
language Opcjonalnie Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą 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 zestawie kafelków, zostanie użyty domyślny język tego zbioru.
region Opcjonalnie Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony.

Tryb directions

W tym przykładzie użyto trybu directions, aby wyświetlić trasę między Oslow a Telemark, Norwegią, odległość i czas podróży, z pominięciem dróg płatnych 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ą być wyświetlane wskazówki dojazdu. Nazwa miejsca, adres, kod, współrzędne szerokości i długości geograficznej lub identyfikator miejsca ze zmianą znaczenia w adresie URL. Interfejs Maps Embed API obsługuje zarówno kod +, jak i %20 podczas zmiany znaczenia spacji. Na przykład przekonwertuj nazwę „City Hall, New York, NY” na City+Hall,New+York,NY lub użyj kodu plus „849VCWC8+R9” na numer 849VCWC8%2BR9.
destination Wymagane Określa punkt końcowy trasy dojazdu. Nazwa miejsca, adres, kod, współrzędne szerokości i długości geograficznej lub identyfikator miejsca ze zmianą znaczenia w adresie URL. Interfejs Maps Embed API obsługuje zarówno kod +, jak i %20 podczas zmiany znaczenia spacji. Na przykład przekonwertuj nazwę „City Hall, New York, NY” na City+Hall,New+York,NY lub użyj kodu plus „849VCWC8+R9” na numer 849VCWC8%2BR9.
waypoints Opcjonalnie Określa co najmniej 1 miejsce pośrednie do wyznaczania wskazówek dojazdu między miejscem wylotu a celem podróży. Nazwa miejsca, adres lub identyfikator miejsca. Możesz określić wiele punktów pośrednich za pomocą pionowej kreski (|) do oddzielenia miejsc (np. Berlin,Germany|Paris,France). Możesz określić do 20 punktów pośrednich.
mode Opcjonalnie Określa metodę podróży. Jeśli nie podasz trybu, interfejs Maps Embed API wyświetli co najmniej 1 z najbardziej odpowiednich trybów dla określonej trasy. driving, walking (najlepiej w przypadku ścieżek dla pieszych i chodników, jeśli są dostępne), bicycling (oznacza trasy to ścieżki rowerowe i preferowane ulice, jeśli są dostępne), transit lub flying.
avoid Opcjonalnie Określa obiekty, których należy unikać we wskazówkach dojazdu. Pamiętaj, że nie wyklucza to tras obejmujących obiekty objęte ograniczeniami; wyniki promują bardziej korzystne trasy. tolls, ferries lub highways. Poszczególne wartości rozdziel pionową kreską (np. avoid=tolls|highways).
units Opcjonalnie Określa metodę pomiaru, dane lub imperialne podczas wyświetlania odległości w wynikach. Jeśli nie określisz units, jednostki, które mają zostać użyte, będą określane na podstawie kraju origin w zapytaniu. metric lub imperial
center Opcjonalnie Definiuje środek widoku mapy. Może przyjmować 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 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 Opcjonalnie Definiuje typ elementów mapy do wczytania. roadmap (domyślna) lub satellite
language Opcjonalnie Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą 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 zestawie kafelków, zostanie użyty domyślny język tego zbioru.
region Opcjonalnie Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony.

Tryb streetview

Interfejs Maps Embed API pozwala wyświetlać zdjęcia Street View jako interaktywne panoramy z wybranych lokalizacji na całym obszarze. Dostępne są też zdjęcia sferyczne przesyłane przez użytkowników i kolekcje specjalne Street View.

Każda panorama Street View obejmuje pełny widok 360 stopni z jednego miejsca. Obrazy zawierają widok w poziomie (360 stopni) i 180 stopni w pionie (od góry do góry w dół). Tryb streetview umożliwia korzystanie z przeglądarki, która renderuje panoramę w formie sfery, a na środku znajduje się kamera. Możesz sterować kamerą, by 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ą w postaci wartości rozdzielonych 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, a zdjęcia mogą być za każdym razem wykonywane w nieco innej pozycji. Dlatego po aktualizacji zdjęć Twoja lokalizacja może się zmienić w widok panoramiczny.

  • pano to specjalny identyfikator panoramy. Jeśli podajesz właściwość pano, możesz też podać location. Parametr 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 Opcjonalnie Wskazuje kierunek kompasu aparatu w stopniach w prawo, od kierunku północnego. 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ślne ustawienie to 0° w zależności od pozycji kamery podczas robienia obrazu. Z tego względu nachylenie o 0° jest często, ale nie zawsze, poziome. Na przykład zdjęcie wykonane na wzgórzu prawdopodobnie będzie miało domyślny kąt, który nie jest poziomy. Wartość w stopniach od -90° do 90°
fov Opcjonalnie określa poziome pole widzenia obrazu. Domyślna wartość to 90°. W przypadku widocznego obszaru o stałym rozmiarze pole widzenia można uznać za poziom powiększenia – mniejsze liczby oznaczają większy poziom powiększenia. Wartość w stopniach, w zakresie 10°–100°
center Opcjonalnie Definiuje środek widoku mapy. Może przyjmować 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 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 Opcjonalnie Definiuje typ elementów mapy do wczytania. roadmap (domyślna) lub satellite
language Opcjonalnie Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą 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 zestawie kafelków, zostanie użyty domyślny język tego zbioru.
region Opcjonalnie Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony.

Tryb search

Tryb Search wyświetla wyniki wyszukiwania w widocznym obszarze mapy. Zalecamy zdefiniowanie lokalizacji na potrzeby wyszukiwania przez jej uwzględnienie w wyszukiwanym haśle (record+stores+in+Seattle) lub za pomocą parametrów center i zoom, które określają zakres wyszukiwania.

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 zawierać ograniczenie geograficzne, np. in+Seattle lub near+98033.
center Opcjonalnie Definiuje środek widoku mapy. Może przyjmować 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 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 Opcjonalnie Definiuje typ elementów mapy do wczytania. roadmap (domyślna) lub satellite
language Opcjonalnie Określa język, który będzie używany w elementach interfejsu i wyświetlaniu etykiet na kafelkach mapy. Domyślnie użytkownicy widzą 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 zestawie kafelków, zostanie użyty domyślny język tego zbioru.
region Opcjonalnie Określa odpowiednie granice i nazwy do wyświetlania na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu określony jako dwuznaczne (nienumeryczne) mapowanie podrzędne regionu Unicode na znajome wartości ccTLD („domena najwyższego poziomu”). Sprawdź szczegóły pokrycia Google Maps Platform, aby poznać obsługiwane regiony.

Parametry identyfikatora miejsca

Interfejs Maps Embed API obsługuje korzystanie z identyfikatorów miejsc zamiast podawania nazwy miejsca lub adresu. Identyfikatory miejsc to stały sposób unikalnej identyfikacji miejsca. Więcej informacji znajdziesz w dokumentacji interfejsu Google 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ć przedrostek place_id:. Ten kod określa Ratusz Nowojorski jako źródło żądania wskazówek dojazdu: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius ustawia promień (podany w metrach), w którym można 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 wyszukiwania w 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 zewnętrznych. Kolekcje wnętrz nie są uwzględniane w wynikach wyszukiwania. Pamiętaj, że w przypadku określonej lokalizacji panoramy zewnętrzne mogą nie istnieć. Pamiętaj też, że wyszukiwanie zwróci panoramy tylko wtedy, gdy można określić, czy są one wewnątrz czy na zewnątrz. Na przykład zdjęcia sferyczne nie są zwracane, ponieważ nie wiadomo, czy znajdują się one wewnątrz czy na zewnątrz.