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:

  • MAP_MODE w trybie mapy.
  • YOUR_API_KEY za pomocą klucza interfejsu API. Aby dowiedzieć się więcej, zobacz Uzyskiwanie klucza interfejsu API.
  • PARAMETERS z wymaganymi i opcjonalnymi parametrami mapy i trybu uzyskiwania zgody.

Dodawanie adresu URL do elementu iframe

Aby użyć interfejsu Maps Embed API na swojej stronie internetowej, ustaw adres URL został utworzony jako wartość atrybutu src elementu iframe. Kontroluj 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>

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" służące do usunięcia standardu Obramowanie elementu iframe z całej mapy.
  • Właściwość referrerpolicy="no-referrer-when-downgrade", która umożliwia do wysłania pełnego adresu URL w postaci nagłówka Referer wraz z żądaniem, tak aby Ograniczenia klucza interfejsu API mogą działać prawidłowo.

Możesz zmienić rozmiar elementu iframe, dostosowując go do struktury i projektu Twojej strony ale okazuje się, że użytkownicy zwykle łatwiej radzą sobie z większymi mapami. Pamiętaj, że osadzone mapy nie są obsługiwane w żadnym z tych miejsc: .

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. Ten może powodować ograniczenie klucza interfejsu API odrzucić te prośby. Aby ograniczenie działało prawidłowo, dodaj parametr referrerpolicy do elementu iframe, jak w przykładzie powyżej, do jawnego zezwalaj na wysyłanie nagłówków Referer do Google.

Reklamy na mapie

Interfejs Maps Embed API może obejmować reklamy na mapach. Format reklamy zestaw reklam wyświetlanych na danej mapie może 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. punkt orientacyjny, firmę, obiekt geograficzny lub miejscowość.
  • view: zwraca mapę bez znaczników i wskazówek.
  • directions: wyświetla ścieżkę między dwoma lub większą liczbą elementów. określonych punktów na mapie, a także odległość i czas podróży.
  • streetview: zawiera interaktywne widoki panoramiczne z wyznaczonych lokalizacjach.
  • search: pokazuje wyniki wyszukiwania na widocznej mapie. i regionie.

Tryb place

Poniższy URL korzysta z trybu mapy place do wyświetlania znacznika mapy w Wieża 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 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 ucieczki ze spacji. Na przykład przekonwertuj „City Hall, New York, NY”. do City+Hall,New+York,NY lub kody plus „849VCWC8+R9” do 849VCWC8%2BR9
center Opcjonalnie Określa środek widoku mapy. Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji.
maptype Opcjonalnie Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego zbioru kafelków.
region Opcjonalnie Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach.

Tryb view

Poniższy przykład używa trybu view i opcjonalnego parametru maptype do: 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żyć tych parametrów:

Parametr Typ Opis Akceptowane wartości
center Wymagany Określa środek widoku mapy. Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji.
maptype Opcjonalnie Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego zbioru kafelków.
region Opcjonalnie Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach.

Tryb directions

W poniższym przykładzie użyto trybu directions do wyświetlenia ścieżki między Oslowem czy Telemark w Norwegii, jaka jest odległość i czas podróży, oraz pozwoli 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, z którego mają zostać wyświetlone wskazówki dojazdu. Nazwa miejsca ze zmianą znaczenia w adresie URL, adres, plus kod, szerokość i długość geograficzna lub identyfikator miejsca. Interfejs Maps Embed API obsługuje zarówno +, jak i %20 podczas ucieczki ze spacji. Na przykład przekonwertuj „City Hall, New York, NY”. do City+Hall,New+York,NY lub kody plus „849VCWC8+R9” do 849VCWC8%2BR9
destination Wymagany Określa punkt końcowy trasy dojazdu. Nazwa miejsca ze zmianą znaczenia w adresie URL, adres, plus kod, szerokość i długość geograficzna lub identyfikator miejsca. Interfejs Maps Embed API obsługuje zarówno +, jak i %20 podczas ucieczki ze spacji. Na przykład przekonwertuj „City Hall, New York, NY”. do City+Hall,New+York,NY lub kody plus „849VCWC8+R9” do 849VCWC8%2BR9
waypoints Opcjonalnie Określa jedno lub kilka miejsc pośrednich, z których wyznaczają trasy dojazdu miejsca wylotu i przylotu. Nazwa, adres lub identyfikator miejsca. Punkty pośrednie można określać za pomocą pionowej kreski (|). w osobnych miejscach (np. Berlin,Germany|Paris,France). Dostępne opcje określić do 20 punktów pośrednich.
mode Opcjonalnie Definiuje metodę podróży. Jeśli nie określono żadnego trybu, Interfejs Maps Embed API wyświetli jeden lub więcej trybów, które najlepiej pasują do zapytania wskazanej trasy. driving, walking (preferowany pieszy ścieżek i chodników, jeśli są dostępne), bicycling (który trasami rowerowymi i preferowanymi ulicami, jeśli są dostępne). transit, czy flying.
avoid Opcjonalnie Określa funkcje, których należy unikać we wskazówkach dojazdu. Pamiętaj, że nie oznacza to, wykluczając trasy obejmujące obiekty objęte ograniczeniami; prowadzi do stron mogą prowadzić do korzystniejszych tras. 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 units, parametr Jednostki do użycia określają origin kraj zapytania. metric lub imperial
center Opcjonalnie Określa środek widoku mapy. Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji.
maptype Opcjonalnie Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego zbioru kafelków.
region Opcjonalnie Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach.

Tryb streetview

Interfejs Maps Embed API umożliwia wyświetlanie zdjęć Street View jako i interaktywnych panoram ze wyznaczonych miejsc pokrycia. Użytkownik przesłanych zdjęć sferycznych, Kolekcje specjalne Street View .

Każda panorama Street View zapewnia pełny widok 360 stopni lokalizacji. Obrazy obejmują widok poziomy (360 stopni) i 180 stopni w pionie (od prostej do prawej). Tryb streetview udostępnia przeglądarkę, która renderuje wynik jako sferę z aparatem pośrodku. Możesz sterować aparatem aby 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ę zrobionych w pobliżu tego miejsca. Ponieważ zdjęcia Street View okresowo odświeżane, a zdjęcia mogą być zrobione w innym stopniu może zostać przyciągnięty do innego po zaktualizowaniu zdjęć.

  • pano to konkretny identyfikator panoramy. Jeśli podasz pano możesz też określić location. Obiekt location będzie używany tylko wtedy, gdy interfejs API nie będzie mógł znaleźć panoramy ID.

Te parametry adresu URL są opcjonalne:

Parametr Typ Opis Akceptowane wartości
heading Opcjonalnie Wskazuje na kompasie kierunek kamery podany w stopniach w prawo z 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 będą kątowe kamera w górę, a wartości ujemne – w dół. domyślny kąt 0° jest ustawiany w zależności od położenia kamery podczas zdjęcia. Z tego powodu często jest o 0°, ale nie zawsze w poziomie. Na przykład zdjęcie zrobione ze wzgórza może nie będą mieć domyślnego kąta nachylenia. Wartość w stopniach od -90° do 90°
fov Opcjonalnie określa poziome pole widzenia zdjęcia. it domyślnie wynosi 90°. W widocznym obszarze o stałym rozmiarze pole widok można uznać za poziom powiększenia, gdzie mniejsze liczby oznaczają i zwiększyć powiększenie. Wartość w stopniach (zakres od 10° do 100°)
center Opcjonalnie Określa środek widoku mapy. Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji.
maptype Opcjonalnie Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego zbioru kafelków.
region Opcjonalnie Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach.

Tryb search

Tryb Search wyświetla wyniki wyszukiwania w widocznym regionie mapy. Zalecamy definiowanie lokalizacji wyszukiwania za pomocą uwzględniając lokalizację w wyszukiwanym haśle (record+stores+in+Seattle) lub dodając parametry center i zoom, które powiążą 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 Definiuje wyszukiwane hasło. Może to być ograniczenie geograficzne, na przykład in+Seattle lub near+98033.
center Opcjonalnie Określa środek widoku mapy. Akceptuje rozdzielane przecinkami wartości szerokości i długości geograficznej. 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ępne w wybranej lokalizacji.
maptype Opcjonalnie Definiuje typ kafelkó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 do wyświetlania na kafelkach mapy. Domyślnie użytkownicy zobaczą mapę język. Ten parametr jest obsługiwany tylko w przypadku niektórych kafelków krajów. jeśli określony język nie jest obsługiwany dla danego zestawu kafelków, będzie używany domyślny język tego zbioru kafelków.
region Opcjonalnie Określa odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu, który jest podany jako dwuznakowy (nienumeryczny) mapowanie subtagu regionu Unicode na znajomą domenę ccTLD („domenę najwyższego poziomu”) dwuznakowych. Zobacz Google Maps Platform Szczegóły dotyczące zakresu ochrony w obsługiwanych regionach.

Parametry identyfikatora miejsca

Interfejs Maps Embed API obsługuje stosowanie identyfikatorów miejsc zamiast podawania identyfikatora nazwę lub adres miejsca. Identyfikatory miejsc to stabilny sposób zidentyfikować miejsce. Więcej informacji znajdziesz w dokumentacji interfejsu Google Places API.

Interfejs Maps Embed API akceptuje identyfikatory miejsc dla następującego adresu URL parametry:

  • q
  • origin
  • destination
  • waypoints

Aby używać identyfikatora miejsca, musisz najpierw dodać prefiks place_id:. następujący kod określa ratusz jako punkt początkowy trasy dojazdu w Nowym Jorku żądanie: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • Funkcja radius ustawia promień (w metrach), w którym będą wyszukiwane panoramę wyśrodkowaną na danej szerokości i długości geograficznej. Prawidłowe wartości są nieujemnymi liczbami całkowitymi. 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. Liczba wyszukiwań jest nie tylko do konkretnych źródeł.
    • outdoor ogranicza wyszukiwanie do kolekcji plenerowych. Do użytku wewnątrz kolekcje nie są uwzględniane w wynikach wyszukiwania. Pamiętaj, że panoramy na zewnątrz może nie istnieć w określonej lokalizacji. Pamiętaj też, że wyszukiwanie zwraca panoramy, jeśli można określić, czy są one wewnątrz i na zewnątrz. Na przykład obiekty PhotoSphere nie są zwracane, ponieważ są nieznane zarówno wewnątrz, jak i na zewnątrz.