umieszczanie mapy,

Ten przewodnik pokazuje, jak umieścić interaktywną mapę na swojej 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 użyć interfejsu Maps Embed API na swojej stronie internetowej, ustaw adres URL został utworzony jako wartość atrybutu src elementu iframe. Rozmiar mapy możesz kontrolować za pomocą atrybutów iframe height i width, 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 umożliwia wyświetlanie 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 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 iframe, aby dopasować go do struktury i projektu swojej witryny, ale według naszych badań użytkownicy łatwiej korzystają z większych map. Pamiętaj, że mapy osadzone o rozmiarach mniejszych niż 200 pikseli w każdym wymiarze nie są obsługiwane.

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ć, że ograniczenie klucza interfejsu API odrzuci żądania. 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 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 adresie, np. punkt orientacyjny, firmę, obiekt geograficzny lub miejscowość.
  • view: zwraca mapę bez znaczników ani 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: wyświetla wyniki wyszukiwania w widocznym regionie mapy.

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 na mapie. 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 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 Określa typy kafelków mapy do załadowania. 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 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 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. Zapoznaj się ze szczegółami dotyczącymi obsługiwanych regionów w przypadku Google Maps Platform.

Tryb view

W tym przykładzie do wyświetlenia widoku satelitarnego mapy używamy 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żywać 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 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 Określa typy kafelków mapy do załadowania. 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 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 odpowiednie granice i etykiety do wyświetlenia na podstawie wrażliwości geopolitycznej. Akceptuje kod regionu podany jako dwuznakowy tag regionu w standardzie Unicode (niecyfrowy) mapowany na znane wartości 2-znakowe ccTLD („domena najwyższego poziomu”). 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ż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, adres, kod i szerokość/długość geograficzna z uwzględnieniem zmiany znaczenia w adresie URL lub identyfikator miejsca. Interfejs Maps Embed API obsługuje zarówno +, jak i %20 podczas ucieczki ze spacji. 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 przekonwertuj „City Hall, New York, NY”. do City+Hall,New+York,NY lub kody plus „849VCWC8+R9” do 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ś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ć na trasie. 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 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 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 Określa typy kafelków mapy do załadowania. 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 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 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. 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 i interaktywnych panoram z 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 zawierają widok poziomy 360° (pełny obrót) oraz widok pionowy 180° (od góry do dołu). 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 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. 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 panoramę po zaktualizowaniu zdjęć.

  • pano to identyfikator konkretnej 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 nachylenia 0° jest ustawiany na podstawie pozycji kamery w momencie rejestrowania obrazu. 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 obrazu. 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 w zakresie 10–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 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 Określa typy kafelków mapy do załadowania. 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 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 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 całym 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żyć 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 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 Określa typy kafelków mapy do załadowania. 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 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 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 atrybutu 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:. Ten kod wskazuje nowojorski ratusz jako punkt początkowy prośby o wyznaczenie trasy: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8.

  • radius ustawia promień (w metrach) wyszukiwania panoramy, wyśrodkowanej 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 wyszukiwania w Street View do wybranych źródeł. Prawidłowe wartości to:

    • default korzysta z domyślnych źródeł Street View; wyszukiwania nie są ograniczone do konkretnych źródeł.
    • outdoor ogranicza wyszukiwanie do kolekcji na zewnątrz. Do użytku wewnątrz kolekcje nie są uwzględniane w wynikach wyszukiwania. Pamiętaj, że w przypadku wybranej lokalizacji panoramy zewnętrzne mogą nie istnieć. 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.