Omówienie
Google Maps Platform można używać w przeglądarkach (JS, TS), na Androidzie i iOS, a także interfejsy API usług internetowych, które pozwalają uzyskać informacje o miejscach, i odległości. Przykłady w tym przewodniku dotyczą jednej platformy, podane są linki do dokumentacji na potrzeby implementacji na innych platformach.
Szybki konstruktor w konsoli Google Cloud pozwala szybko utworzyć lokalizator, w tym wizytówki w Profilu Firmy i automatyczne umieszczanie linków do rezerwacji spotkań z usługi zewnętrznych usługodawców. Interaktywny interfejs umożliwia generowanie kodu i wdrażanie w chmurze, o kilka minut.
Użytkownicy chcą wyszukiwać w internecie produkty i usługi oraz znajdować najlepsze i najbardziej do której można dotrzeć, umówić się na spotkanie czy odebrać zamówienie. Chcą jak najszybciej dotrzeć na Twoją stronę, a Ty chcesz atrakcyjne wrażenia online, zwiększające liczbę wizyt w placówkach firmy, zwiększyć zadowolenie użytkowników i ograniczyć liczbę zgłoszeń do pomocy technicznej. Chcesz też mierzyć skuteczność lokalizatora i określenie, czy klienci znajdą Twoją lokalizacji i chcesz się dowiedzieć, co możemy ulepszyć.
Lokalizator Plus—porady i wskazówki dotyczące dostosowywania, jakie podajemy w to optymalna kombinacja Google Maps Platform, Interfejsy API umożliwiające tworzenie doskonałych wrażeń użytkowników lokalizatora. Stosując się do tych zasad, może pomóc użytkownikom znajdować lokalizacje na mapie, wyświetlać szczegółowe informacje i podpowiadać im, czy jadą samochodem, rowerem, pieszo lub transportem publicznym.
W przypadku użytkowników Lokalizator Plus panel statystyk pomaga analizować i generować statystyki na podstawie danych, dzięki którym dowiesz się, jak klienci wchodzą w interakcje z Twoimi klientami. lokalizator sklepów. Aby uzyskać dostęp do tego raportu, otwórz Sekcja Raporty zaangażowania w konsoli. Więcej informacji o tym raporcie znajdziesz w artykule Raporty zaangażowania
Poniższy diagram przedstawia podstawowe interfejsy API wykorzystywane przy implementacji Lokalizatora Plus. Diagram pokazuje również bazę danych z własnymi danymi o lokalizacji, które można połączyć Umieść szczegóły, aby udostępnić użytkownikom najlepszy, kompletny zestaw ale podaj w nim nowe informacje. (Kliknij, aby powiększyć).
![Po lewej stronie diagramu przeglądarka wyświetla mapę z wyskakującym okienkiem Szczegóły miejsca.
Po prawej stronie diagramu znajduje się lista interfejsów API z różnymi funkcjami:
Maps JavaScript API do wizualizacji i treści lokalizacji, określania stylu mapy i mapy
znaczniki, niestandardowy widok Street View i wyświetlanie tras. Autouzupełnianie miejsc
funkcji uzupełniania i pisania z wyprzedzeniem. Interfejsy API Miejsc i Geokodowania dla
lokalizację adresu. interfejsu DISTANCE Matrix API do pozycjonowania lokalizacji według odległości, czasu i innych kryteriów
środkami transportu. Interfejs Directions API wyświetla trasę na podstawie czasu podróży i środka transportu.
Środek diagramu, ikona magazynu danych reprezentująca niestandardowe punkty danych lokalizacji
w górę do ikony serwera WWW ze strzałką z podwójnymi grotami wskazującymi odczyt i zapis danych
między serwerem WWW a magazynem danych. Strzałki między przeglądarką
i interfejsy API przechodzą przez serwer WWW jako pośrednik.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/locator_arch_diagram.png?authuser=19&hl=pl)
Włączam interfejsy API
Aby wdrożyć te metody, musisz włączyć w Konsola Google Cloud:- Maps JavaScript API
- Interfejs Places API
- Geocoding API
- Interfejs DISTANCE Matrix API
- Directions API,
Sekcje implementacji
Poniżej przedstawiamy praktyki i sposoby dostosowywania, które omówimy w tym temacie.
- Podstawowym elementem jest ikona znacznika wyboru.
- Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie, ulepszać rozwiązanie.
Wyświetlanie lokalizacji na interaktywnej mapie |
Utwórz mapę, która pozwala użytkownikom zobaczyć szczegóły lokalizacji, poruszać się, powiększać i pomniejszać. Możesz też zapoznać się z Szybki konstruktor Lokalizator Plus aby szybko utworzyć mapę, w tym łatwo importować informacje o firmie ze Profil Firmy wizytówek, umieszczania linków do rezerwacji spotkań i wdrażania w Google Cloud Storage. |
|
Podawanie informacji o miejscu | Kiedy użytkownicy znajdą najbliższe lokalizacje na mapie, zadbaj o to, aby były rozpoznawalne Umieść informacje o lokalizacjach, aby pomóc klientom w podjęciu decyzji. | |
Wyświetlanie lokalizacji pod kątem 45° | Zapewnij użytkownikom lepszy obraz swojej lokalizacji w widoku satelitarnym pod kątem 45 stopni. | |
Ustalanie lokalizacji użytkownika | dodać funkcję pisania w miarę postępów, która poprawi wygodę użytkowników na wszystkich platformach; poprawić dokładność adresów dzięki minimalnej liczbie naciśnięć klawiszy. | |
Pokazuję czas podróży i odległość do najbliższych lokalizacji | Oblicz odległość i czas podróży dla wielu punktów początkowych i docelowych opcjonalnie określające różne środki transportu, takie jak spacer, samochód, lub na rowerze. | |
Pomaganie użytkownikom w umawianiu spotkań |
Zezwalaj użytkownikom na rezerwowanie spotkań z panelu bocznego Szczegóły miejsca. Możesz też zapoznać się z Szybki konstruktor Lokalizator Plus aby szybko utworzyć mapę, w tym łatwo importować informacje o firmie ze Profil Firmy wizytówek, umieszczania linków do rezerwacji spotkań i wdrażania w Google Cloud Storage. |
|
Wyświetlanie ofert lokalnych | Pokaż użytkownikom, które można kliknąć, oferty lokalne w panelu bocznym Szczegóły miejsca. | |
Podawanie wskazówek dojazdu | Uzyskuj wskazówki dojazdu z miejsca wylotu do miejsca docelowego, używając różnych środków transportu takie jak spacer, jazda samochodem, jazda na rowerze i transport publiczny. | |
Dostosowywanie mapy | Utwórz niestandardowe znaczniki mapy, aby wyróżnić swoje lokalizacje, i nadaj mapie odpowiedni styl które pasują do kolorów Twojej marki. Wyświetlanie (lub ukrywanie) konkretnych ciekawych miejsc (POI) w mapę, aby ułatwić użytkownikom orientowanie się i kontrolować gęstość ciekawych miejsc, aby poprawić porządek na mapach. | |
Uzyskiwanie statystyk użytkowania dzięki statystykom | Skonfiguruj Google Analytics i używaj Google Analytics, aby uzyskać statystyki dotyczące strategii lokalizatora i implementacją. | |
Wysyłanie trasy na komórkę | Oprócz wyświetlania wskazówek w lokalizatorze możesz również wysłać wskazówki dojazdu do do nawigacji za pomocą Map Google w podróży. | |
Wyświetlanie Street View, aby ułatwić użytkownikom wizualizację lokalizacji | Udostępnij użytkownikom zdjęcia Street View z widokami 360°, aby lepiej ich zorientować się i pomóc im szybciej znaleźć Twoją lokalizację. | |
Określanie lokalizacji użytkownika za pomocą geolokalizacji | Jeśli nie chcesz korzystać z usług lokalizacyjnych na urządzeniu, użyj Geolokalizacja pomaga określić lokalizację użytkownika. | |
Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu | Połącz informacje o swojej lokalizacji z informacjami o miejscu aby zapewnić użytkownikom szeroki zestaw danych ułatwijących podejmowanie decyzji. |
Wyświetlanie lokalizacji na interaktywnej mapie
Lokalizator to ważny element interfejsu, który wpływa na wrażenia użytkownika. Niektóre witryny mogą jednak nie mieć nawet prostą mapę, która wymaga od użytkowników opuszczenia strony lub aplikacji, aby znaleźć w pobliżu lokalizacji. Oznacza to, że użytkownicy, którzy muszą przełączać się między stronami w celu znalezienia potrzebnych informacji. Zamiast tego możesz ulepszyć możesz wykorzystać te funkcje, osadzając i dostosowując mapy w swoich aplikacjach.
Możesz to zrobić na kilka sposobów: (1) za pomocą polecenia Szybki konstruktor Lokalizator Plus aby udostępnić tę funkcję od razu, oraz (2) użyć własnej implementacji Map dynamicznych. W tej sekcji szczegółowo opisujemy te opcje.
Korzystanie z Szybkiego konstruktora Lokalizatora Plus
Za pomocą Szybki konstruktor Lokalizator Plus , aby zaimportować dane firmy z jej profilu. Zmiana w biznesie szczegóły profilu firmy będą widoczne w lokalizatorze sklepów na Twojej stronie. Mogą one zawierać m.in. godziny otwarcia, informacje kontaktowe, zdjęcia i rodzaje usług. Szybki konstruktor pozwoli Ci szybko zorientować się w konfiguracji lokalizacji firmy na mapie, w celu wygenerowania wdrożenia kodu lub bezpośredniego wdrożenia w Google Cloud Storage w ciągu kilku minut.
![Integracja z Profilem Firmy](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_gbp_integration.gif?authuser=19&hl=pl)
![Wdróż w Cloud](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_deploy_to_cloud.gif?authuser=19&hl=pl)
Korzystanie z własnej implementacji Map dynamicznych
W tym przykładzie wykorzystano: Maps JavaScript API | Dostępne też: Android | iOS |
Dodanie do strony mapy dynamicznej, czyli mapy, którą użytkownicy mogą przesuwać, powiększania i pomniejszania oraz wyświetlania szczegółowych informacji o różnych lokalizacjach i punktach zainteresowania – można to zrobić za pomocą kilku linijek kodu.
Najpierw musisz dodać do strony interfejs Maps JavaScript API. Można to zrobić poprzez umieszczenie na stronie HTML linku do poniższego skryptu.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
Adres URL odwołuje się do funkcji JavaScriptu initMap
, która uruchamia się, gdy strona
. W adresie URL możesz też określić
z języka lub regionu mapy, aby mieć pewność, że jest ona sformatowana odpowiednio do
kraju, na który kierujesz reklamy. Ustawienie regionu gwarantuje też, że
aplikacji używanych poza Stanami Zjednoczonymi jest ukierunkowany na wybrany przez Ciebie region. Wyświetl
Szczegółowe informacje o zasięgu Google Maps Platform
, aby zobaczyć pełną listę obsługiwanych języków i regionów, oraz dowiedzieć się więcej o
region
za pomocą parametru.
Następnie potrzebujesz kodu HTML div
, aby umieścić mapę na stronie.
To miejsce, w którym będzie wyświetlana mapa.
<div id="map"></div>
Następnym krokiem jest ustawienie podstawowych funkcji mapy. Odbywa się to w
Funkcja skryptu initMap
określona w adresie URL skryptu. W tym skrypcie
jak w poniższym przykładzie, możesz ustawić lokalizację początkową,
rodzaj mapy,
które elementy sterujące będą dostępne na mapie dla użytkowników. Zwróć uwagę, że
getElementById()
odwołuje się do „mapy” Identyfikator div
.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, zoomControl: false }); }
Jeśli chodzi o lokalizator, zwykle interesuje Cię ustawienie początkowej lokalizacji, czyli centralnego punktu punktu lub granic, a także poziomu powiększenia (stopnia powiększenia danej lokalizacji). Większość Inne elementy, takie jak dostrajanie elementów sterujących, są opcjonalne, jeśli interakcji z mapą.
Pobieram identyfikatory miejsc
W tym przykładzie wykorzystano: Places API | Dostępne też: JavaScript |
Być może masz bazę danych lokalizacji z podstawowymi informacjami, takimi jak nazwa
jego lokalizację, adres i numer telefonu. Pobieranie informacji przesłanych przez Mapy Google
Informacje o tym miejscu są dostępne w ramach platformy, m.in. współrzędne geograficzne i informacje o użytkownikach
informacje, znajdź identyfikator miejsca odpowiadający każdej lokalizacji w bazie danych. Dostępne opcje
Zadzwoń do
Znajdź punkt końcowy Place w wyniku wyszukiwania miejsc interfejsu Places API i poproś o tylko pole place_id
. Oto przykład żądania
identyfikator miejsca siedziby Google w Londynie:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
Możesz zapisać identyfikator tego miejsca w bazie danych i używać ich jako efektywnego sposobu wyszukiwania informacji o tym miejscu. Obserwujesz instrukcje używania identyfikatora miejsca do geokodowania, pobierania informacji o miejscu i wysyłania próśb o wskazówki dojazdu. do wybranego miejsca.
Geokodowanie lokalizacji
W tym przykładzie wykorzystano: Geocoding API | Dostępne też: JavaScript |
Jeśli Twoja baza danych lokalizacji zawiera adresy, ale nie współrzędne geograficzne, użyj funkcji Geocoding API do uzyskania szerokości i długości geograficznej tego adresu dla na potrzeby umieszczenia znacznika na mapie. Możesz geokodować adresy po stronie serwera, zapisywać szerokości i długości geograficzne w bazie danych; odśwież co najmniej co 30 dni.
Oto przykład użycia interfejsu Geocoding API do uzyskania szerokość i długość geograficzna identyfikatora miejsca zwróconego dla biura Google w Londynie:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
Dodawanie lokalizacji do mapy
Następnym krokiem jest dodanie lokalizacji do mapy. Zwykle polega to na dodaniu znaczniki ale są też inne opcje, takie jak: dane .
Gdy masz szerokość i długość geograficzną swojej lokalizacji, możesz dodać znacznik na mapie:
var marker = new google.maps.Marker({ position: { lat: 51.493073, lng: -0.146550 }, label:"A", title:"Location Name" }); // To add the marker to the map, call setMap(); marker.setMap(map);
Za pomocą kilku znaczników możesz jednocześnie wyświetlać lokalizację wielu lokalizacji.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/maps.png?authuser=19&hl=pl)
W przypadku dużej liczby lokalizacji warto rozważyć zastosowanie grupowania znaczników. narzędzie dla JavaScript Androida lub iOS: Oto przykład grupowania znaczników w lokalizatorze magazynu JavaScript na GitHubie.
Podawanie informacji o miejscu
W tym przykładzie użyto: Maps JavaScript API | Dostępne też: Interfejs API | Android | iOS |
Możesz udostępnić informacje o miejscu, które użytkownicy muszą znać, zanim odwiedzą jedno z w Twoich lokalizacjach. Z rozbudowanymi informacjami o miejscu takie jak dane kontaktowe, godziny pracy, oceny użytkowników, zdjęcia użytkowników stan zamknięcia, użytkownicy będą wiedzieć, czego mogą oczekiwać, gdy będą w Twojej lokalizacji. Po wywołaniu interfejsu Places API możesz filtrować renderować odpowiedź w oknie informacyjnym, na pasku bocznym lub w dowolny inny sposób.
Aby przesłać prośbę o podanie informacji o miejscu, potrzebujesz identyfikatora miejsca każdej z lokalizacji. Informacje o tym, jak pobrać identyfikatory miejsc swoich danych, znajdziesz w sekcji Uzyskiwanie identyfikatorów miejsc. lokalizacji.
Rozwiń, aby zobaczyć filmy z prośbą o przesłanie informacji o miejscu:
Sprawdź godziny otwarcia
Sprawdź informacje o zamknięciu drogi
Kontroluj koszty
Poniższy przykład korzysta z biblioteki miejsc i interfejsu Maps JavaScript API do pobrania informacji o miejscach. i dodać je do okna informacyjnego. Implementacja ta wykorzystuje strategię oszczędzania kosztów wywoływania żądania szczegółów miejsca tylko wtedy, gdy użytkownik poprosi o podanie szczegółów, klikając na znaczniku zamiast z wyprzedzeniem pobierać szczegółowe informacje o wszystkich lokalizacjach niezależnie zainteresowania użytkownika.
const marker = new google.maps.Marker({ map, position: { lat: 51.493073, lng: -0.14655 }, }); const request = { placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", fields: ["name", "formatted_address", "rating", "website"], }; const infowindow = new google.maps.InfoWindow(); const service = new google.maps.places.PlacesService(map); google.maps.event.addListener(marker, "click", function () { service.getDetails(request, (place, status) => { if (status === google.maps.places.PlacesServiceStatus.OK && place) { infowindow.setContent( "<div><strong>" + place.name + "</strong><br>" + place.formatted_address + "<br>" + "Rating: " + place.rating + " stars<br>" + place.website + "</div>" ); infowindow.open(map, this); } }); });
Wyświetlanie lokalizacji pod kątem 45°
W tym przykładzie użyto: Maps JavaScript API | Dostępne też: Android | iOS |
Udostępnienie użytkownikom lokalizacji z lotu ptaka pomaga im lepiej zorientować się, co się dzieje. co pomaga im łatwiej je znaleźć. Gdy użytkownik wybierze jedną lokalizację aby zobaczyć więcej szczegółów, powiększ tę lokalizację i wyświetl pod kątem 45°.
Następujący przykładowy kod ustawia mapę na wysokim poziomie powiększenia, czyli zgodnym typie oraz kąt nachylenia, który w miarę możliwości pozwala wyświetlać zdjęcia pod kątem 45°. Informacje o 45° dostępność tych zdjęć jest wyjaśniona na dokumentacja.
function seeDetail(location) { map.setCenter(location); map.setZoom(19); map.setMapTypeId(google.maps.MapTypeId.HYBRID); map.setTilt(45); }
Powrót do oryginalnego widoku mapy
Użytkownicy często chcą przełączać się między widokami szczegółowym jednego
lokalizacji i widoku podsumowania kilku pobliskich lokalizacji. Aby to ułatwić, dodaj
detektor, aby wykryć, kiedy użytkownik opuszcza widok szczegółowy w interakcji z mapą lub
w widoku listy. Na przykład nasłuchując zdarzenia zoom_changed
w aplikacji
map
obiekt
wskazuje, że użytkownik ręcznie pomniejszył widok szczegółów lub wywołał
innej funkcji, która zaktualizowała poziom powiększenia. W tym przykładzie pomniejszenie powoduje zresetowanie
na pierwotny typ mapy i jej pochylenie.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP; map.addListener("zoom_changed", () => { const newZoom = map.getZoom()!; if (newZoom < 19) { map.setTilt(0); map.setMapTypeId(originalMapTypeId); } });
Identyfikowanie lokalizacji użytkownika
W tym przykładzie zastosowano: Maps JavaScript API | Dostępne też: Android | iOS |
Następnym kluczowym elementem każdego lokalizatora jest identyfikowanie lokalizacji początkowej użytkownika. Domyślnie do wysyłania próśb o to, możesz używać usług lokalizacji na komórki i geolokalizacji w przeglądarce uprawnienia użytkownika do ustawienia punktu początkowego jako bieżącej lokalizacji użytkownika. Użytkownik może jednak odmówi lub może chcieć ustawić inną lokalizację jako punkt początkowy.
Dzisiejsi użytkownicy są przyzwyczajeni do funkcji autouzupełniania wersji Map Google. Funkcję tę można zintegrować z dowolną aplikacją za pomocą Biblioteki Miejsc w Google Maps Platform na urządzeniach mobilnych i w internecie. Gdy użytkownik wpisuje tekst adres, autouzupełnianie wypełnia resztę za pomocą widżetów. Możesz też udostępniać własną funkcję autouzupełniania bezpośrednio w bibliotekach Miejsc.
Aby dodać do witryny bibliotekę autouzupełniania miejsc, wystarczy dodać kilka
do adresu URL skryptu interfejsu Maps JavaScript API. W następujących
przykładowy dodatek to libraries=places
.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
Następnie dodaj na stronie pole tekstowe, w którym użytkownicy będą mogli wpisywać dane.
<input id="autocomplete" placeholder="Enter starting address, city, or zip code" type="text"></input>
Na koniec musisz zainicjować usługę autouzupełniania i połączyć ją z nazwanym polem tekstowym.
Ograniczenie
Umieszczanie podpowiedzi autouzupełniania w typach geokodów konfiguruje pole do wprowadzania danych
akceptuj adresy, dzielnice, miasta i kody pocztowe,
na poziomie szczegółowości opisującym ich pochodzenie. Poproś o geometry
tak, aby odpowiedź zawierała szerokość i długość geograficzną punktu początkowego użytkownika. Czego używasz
te współrzędne pozwalają ponownie wyśrodkować mapę i wskazać związek między lokalizacjami
i jej pochodzenia.
// Create the autocomplete object, restricting the search predictions to // geographical location types. const autocomplete = new google.maps.places.Autocomplete( document.getElementById("autocomplete"), { types: ["geocode"], componentRestrictions: {'country': ['gb']}, fields: ['place_id', 'geometry', 'formatted_address'] } ); // When the user selects an address from the drop-down // zoom to the select location and add a marker. autocomplete.addListener("place_changed", addUserLocation); }
W tym przykładzie, gdy użytkownik wybierze adres,
Funkcja addUserLocation()
to
. Powoduje to uwzględnienie geometrii dopasowanego wyniku, lokalizacji użytkownika, a następnie przesuwania
do tej lokalizacji i zostanie dodany znacznik.
function addUserLocation() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); // Add a marker to the map. const marker = new google.maps.Marker({ map: map }); marker.setLabel("C"); marker.setPosition(place.geometry.location); // Zoom the map to the marker. map.panTo(place.geometry.location); map.setZoom(12); }
Możesz zobaczyć relację między użytkownikiem a konkretnymi lokalizacjami, na poniższej ilustracji.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/autocomplete.png?authuser=19&hl=pl)
Rozwiń sekcję, by zobaczyć instrukcje dodawania miejsca Autouzupełnianie w aplikacji:
Witryna
Aplikacje na Androida
Aplikacje na iOS
Pokazuję czas podróży i odległość do najbliższych lokalizacji
W tym przykładzie zastosowano: Interfejs DISTANCE Matrix API | Dostępne też: Usługa macierzy odległości, Maps JavaScript API |
Gdy znasz już lokalizację użytkownika, możesz porównać ją z lokalizacjami, . Przy pomocy usługi matrycy odległości pomaga Maps JavaScript API użytkownicy wybierają lokalizację, która jest dla nich najdogodniejszy: czas jazdy lub droga. odległość.
Wyświetlanie lokalizacji w pobliżu użytkownika oznacza, że masz już te lokalizacje . Jeśli korzystasz z własnej bazy danych lokalizacji, Ważne jest, aby zadbać o to, aby dane były w formacie, który można wykorzystać na mapie. takich jak GeoJSON, Temat Warstwa danych.
Standardowym sposobem porządkowania listy lokalizacji jest sortowanie ich według odległości. Często to odległość jest obliczana w prosty sposób na podstawie linii prostej między użytkownikiem a lokalizacją. może wprowadzać w błąd. Linia prosta może przebiegać nad nieprzekraczającą rzeką lub ruchliwymi drogami. w czasie, gdy inne miejsce może być dla Ciebie wygodniejsze. Jest to ważne, gdy masz wiele lokalizacji w promieniu kilku kilometrów od siebie.
Usługa macierzy odległości działa na podstawie listy lokalizacji wylotu i celu podróży oraz i podają nie tylko odległość, ale też czas między nimi. W przypadku użytkownika punkt początkowy to miejsce, w którym obecnie się znajdują, lub żądany punkt początkowy. miejsca docelowe to lokalizacje. Punkt początkowy i miejsce docelowe można określić w postaci par współrzędnych lub jako adresy. ten drugi zostanie dopasowany przy wywołaniu usługi. Możesz użyć macierzy odległości, z wieloma dodatkowymi parametrami, które pozwalają pokazywać wyniki na podstawie obecnych lub przyszłych godzin przejazdów.
W poniższym przykładzie wywoływana jest usługa macierzy odległości, która określa pochodzenie użytkownika i lokalizacje. Ten przykład pokazuje, odległość od centrum mapy do trzech biur Google w Londynie.
Krótkie informacje na temat kodowania adresu URL: %2C
= , (przecinek), %3A
= : (dwukropek),
i %7C
= | (kreska pionowa).
https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
&units=metric
&mode=driving
&key=YOUR_API_KEY
&solution_channel=GMP_guides_locatorplus_v2_a
Oto wersja, którą możesz skopiować i uruchomić:
https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a
Rzeczywista odpowiedź z usługi to lista dopasowanych adresów, odległości i czas trwania podobny do pokazanego w przykładzie poniżej:
Rozwiń, aby zobaczyć przykładową odpowiedź:
{ "destination_addresses": [ "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK", "1-13 St Giles High St, West End, London WC2H 8AG, UK", "6 Pancras Square, Kings Cross, London N1C 4AG, UK" ], "origin_addresses": [ "Unnamed Road, London, UK" ], "rows": [ { "elements": [ { "distance": { "text": "4.5 km", "value": 4540 }, "duration": { "text": "15 mins", "value": 924 }, "status": "OK" }, { "distance": { "text": "5.0 km", "value": 5043 }, "duration": { "text": "17 mins", "value": 1044 }, "status": "OK" }, { "distance": { "text": "6.9 km", "value": 6919 }, "duration": { "text": "23 mins", "value": 1357 }, "status": "OK" } ] } ], "status": "OK" }
Poniższa ilustracja przedstawia miejsce wyjazdu (czerwony znacznik C) i miejsca docelowe na mapie:
![Obraz przedstawia mapę miasta z lokalizacją użytkownika w postaci czerwonym znacznikiem
i otaczających go lokalizacji w postaci zielonych znaczników.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/distance_matrix.png?authuser=19&hl=pl)
Odległość w linii prostej i na trasie często się różnią, jak widać na ilustracji w poniższej tabeli.
Lokalizacja | Odległość w prostym stylu | Droga w natężeniu ruchu / czas |
---|---|---|
Lokalizacja A | 3,32 km | 4,5 km / 15 minut |
Lokalizacja B | 3,20 km | 5,0 km / 17 minut |
Lokalizacja C | 4,84 km | 6,9 km / 23 minuty |
Mimo że lokalizacja B jest najbliższa odległość, trasa i czas dotarcia na miejsce są dłużej, ponieważ Lokalizacja A jest dostępna przez autostradę.
Po przesłaniu tej prośby możesz przetworzyć dopasowanie, aby uporządkować odpowiedzi według czas jazdy. Przykłady takiej funkcji znajdziesz w lokalizatorze laboratoriów.
Udostępnianie wskazówek nawigacyjnych
W tym przykładzie zastosowano: Usługa wskazówek dojazdu w interfejsie Maps JavaScript API | Dostępne też: Directions API do obsługi urządzeń z Androidem i iOS – bezpośrednio w aplikacji lub zdalnie przez serwer proxy |
Wyświetlanie użytkownikom wskazówek z poziomu witryny lub aplikacji oznacza, że nie mogą muszą opuścić witrynę, co oznacza, że użytkownicy nie będą rozpraszać uwagi lub zobaczyć konkurencję na mapie. Możesz nawet pokazać emisję dwutlenku węgla przez konkretnego środka transportu i pokazać wpływ każdej z nich.
Usługa wskazówek dojazdu ma również funkcje, które umożliwiają przetwarzanie wyników możesz łatwo wyświetlać na mapie.
Poniżej przedstawiono przykład wyświetlenia panelu wskazówek dojazdu. Więcej informacji na temat przykład, zobacz Wyświetlanie wskazówek dojazdu tekstowych.
Aby dowiedzieć się więcej o tych funkcjach Map Google, przeczytaj Dokumentacja interfejsu Maps JavaScript API lub obejrzyj krok po kroku Codelabs, aby utworzyć lokalizator.
Pomaganie użytkownikom w umawianiu spotkań
Gdy użytkownicy wyświetlą informacje o lokalizacji w panelu bocznym, możesz zaoferować która umożliwia umówienie się na spotkanie za pomocą jednego kliknięcia. co pokazano na ilustracji poniżej.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/store-locator-appointments.png?authuser=19&hl=pl)
Możesz to zrobić na kilka sposobów: (1) za pomocą polecenia Szybki konstruktor Lokalizator Plus udostępnić tę funkcję od razu, oraz (2) skorzystać z Profil Firmy W tej sekcji szczegółowo opisujemy te opcje.
Korzystanie z Szybkiego konstruktora Lokalizatora Plus
Za pomocą Szybki konstruktor Lokalizator Plus aby łatwo zaimportować dane firmy ze swojego Profil Firmy Po zaimportowaniu do narzędzia Szybki konstruktor możesz włączyć linki do rezerwacji spotkań w lokalizacjach Twojej firmy (jeśli są dostępne) za pośrednictwem Zarezerwuj z Google. Nawet jeśli nie masz profilu firmy powiązanego z kontem Google, możesz używać Szybki konstruktor do umieszczania linków do rezerwacji w przypadku firm, w przypadku których włączono już zewnętrzną usługę poprzez funkcję Zarezerwuj z Google*.
![Zarezerwuj z Google](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_reserve_with_google.gif?authuser=19&hl=pl)
*Funkcja Zarezerwuj z Google jest dostępna tylko w wybranych krajach i regionach, w których firmy współpracować z dostawcy usług rezerwacji. Jeśli interesuje Cię funkcja Zarezerwuj z Google, ale obecnie nie korzystasz z tej usługi z partnerem Google, poproś dostawcę o przesłanie zgłoszenia, wypełniając ten formularz i zapoznaj się z naszą dokumentacja aby dowiedzieć się, od czego zacząć. Jeśli nie współpracujesz jeszcze z dostawcą rezerwacji, możesz odpowiednich dostawców w sekcji Rezerwacje w Menedżer Profilu Firmy
Korzystanie z Profilu Firmy w celu umożliwienia rezerwowania spotkań
Jeśli zarządzasz wizerunkiem w internecie za pomocą: Profil Firmy, firma lokalizacje, które utworzysz, będą powiązane z identyfikatorami miejsc w Google Maps Platform. zintegrowaną funkcję mapowania z firmowymi bazami danych.
Interfejsy Business Profile API umożliwiają tworzenie działań, np. rezerwowanie spotkań, które możesz pobierać i widoczne w aplikacjach, ale włączenie tej funkcji wymaga ręcznych działań, jak opisano poniżej.
Gdy użytkownik wyświetli w panelu bocznym Szczegóły miejsca jednej z Twoich lokalizacji, możesz: podać mu link do umówienia się na spotkanie. Instrukcje znajdziesz w tej sekcji.
-
Utwórz interfejsy Business Profile API
placeActionLink
dla lokalizacji typuAPPOINTMENT
,ONLINE_APPOINTMENT
, lubDINING_RESERVATION
.placeActionLink
będzie obiektem, użyj linku do spotkania w panelu bocznym. Jeśli masz już utworzone działanie związane z umówieniem spotkania, za pomocą dowolnego linku i przejdź do następnego kroku). Oto przykładowa odpowiedź z powodu pomyślnego Operacja POSTplaceActionLinks.create
:{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" }
-
Znajdź lokalizację w profilu firmy powiązaną z identyfikatorem miejsca w Google Maps Platform.
Gdy użytkownicy wyświetlają szczegóły miejsca, widzą szczegóły Google Maps Platform. identyfikator miejsca. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji w profilu firmy, więc musisz znajdź identyfikator lokalizacji w oparciu o identyfikator miejsca na mapie, który chcesz pobrać i wyświetlić utworzony przez Ciebie link do rezerwacji spotkań. Wykonaj te wywołania interfejsów Business Profile API:
- Wyświetl listę kont projektu.
- Lista lokalizacji na koncie.
- W lokalizacjach konta
LocationKey
zawiera identyfikator miejsca Google Maps Platform, który możesz porównać z identyfikator wyświetlanej lokalizacji.
-
Dzięki identyfikatorowi lokalizacji możesz uzyskać odpowiedni link do działania. Aby pobrać istniejącą spotkanie
placeActionLink
, lista istniejącychplaceActionLinks
jako lokalizacji i użyj filtraplaceActionType
aby znaleźć link do spotkania, którego chcesz użyć (APPOINTMENT
,ONLINE_APPOINTMENT
lubDINING_RESERVATION
).Ten przykład pokazuje w odpowiedzi NA APPOINTMENT
placeActionLink
z wywołania LIST.{ "placeActionLinks": [ { "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/", "placeActionType": "APPOINTMENT", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } ] }
- Utwórz w panelu bocznym element
<div>
i wypełnij go odpowiednimi danymi ze źródła:placeActionLink
, a zwłaszcza dla identyfikatora URI przez link do rezerwacji spotkania.
Inne alternatywne sposoby dodawania linków do umawiania spotkań
Jeśli nie zarządzasz profilem firmy lub nie chcesz korzystać z Szybki konstruktor Lokalizator Plus, zapoznaj się z dokumentacją na temat umieszczania widżetu rezerwacji w platformie do rezerwacji spotkań do witryny lub aplikacji. Inną opcją jest korzystanie z Google Cloud, Zarządzanie asortymentem w Cloud Spanner (film).
Wyświetlanie ofert lokalnych
Na panelu bocznym szczegółów miejsca możesz wyświetlać użytkownikom oferty lokalne. Interfejs API Google Moja Firma umożliwia tworzenie i pobieranie „wpisów” (np. ofert lokalnych), które są powiązane z Twoimi lokalizacjami. Na rysunku poniżej przedstawiono przykładową ofertę lokalną w Panel boczny Szczegóły miejsca.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/store-locator-offers.png?authuser=19&hl=pl)
(Schemat architektury w poprzedniej sekcji pokazuje dostępne technologie dodawania ofert do lokalizatora).
Oferty lokalne są powiązane z lokalizacjami, więc w profilu firmy musisz znaleźć
identyfikator lokalizacji powiązany z identyfikatorem miejsca w Google Maps Platform dla użytkowników lokalizacji.
które oglądają.
Jeśli masz identyfikator lokalizacji w profilu firmy, możesz pobrać odpowiednią ofertę jako
localPost
do wyświetlenia w panelu bocznym szczegółów miejsca. Aby to zrobić:
- Dzięki interfejsowi API Google Moja Firma
utwórz wpisy z ofertami, które chcesz
wyświetlacz, typu
OFFER
. -
Znajdź na mapie lokalizację z profilu firmy lub identyfikator lokalizacji powiązany z identyfikatorem miejsca.
Gdy użytkownicy wyświetlają szczegóły miejsca, widzą szczegóły Google Maps Platform. identyfikator miejsca. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji w profilu firmy, więc musisz znajdź identyfikator lokalizacji w oparciu o identyfikator miejsca na mapie, który chcesz pobrać i wyświetlić link do oferty lokalnej dla Twojej lokalizacji. Wykonaj te wywołania interfejsów Business Profile API:
- Utwórz listę kont projektu.
- Wymień wszystkie lokalizacji na koncie.
- W lokalizacjach konta
LocationKey
zawiera identyfikator miejsca na mapie, który można porównać z identyfikatorem lokalizacji .
Poniżej znajduje się przykład żądania informacji o lokalizacji w Interfejsy Business Profile API:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
Odpowiedź zawiera pole
locationKey
, które jest identyfikatorem miejsca których możesz używać w przypadku żądań Google Maps Platform.Rozwiń, aby zobaczyć przykładową odpowiedź.
{ "name": "accounts/111098884960588804666/locations/15899957830169237700", "locationName": "Sushi Sushi", "primaryPhone": "+49 2222 22222", "primaryCategory": { "displayName": "Restaurant", "categoryId": "gcid:restaurant", }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": "09:00", "closeDay": "MONDAY", "closeTime": "09:10" }, { "openDay": "TUESDAY", "openTime": "11:30", "closeDay": "TUESDAY", "closeTime": "24:00" } ] }, "locationKey": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "locationState": { "isGoogleUpdated": true, "canUpdate": true, "canDelete": true, "isVerified": true, "isPublished": true, "canHaveFoodMenus": true }, "attributes": [ { "attributeId": "has_delivery", "valueType": "BOOL", "values": [ false ] }, { "attributeId": "requires_masks_customers", "valueType": "BOOL", "values": [ true ] }, { "attributeId": "url_order_ahead", "valueType": "URL", "urlValues": [ { "url": "https://example.com/" }, ] }, { "attributeId": "pay_credit_card_types_accepted", "valueType": "REPEATED_ENUM", "repeatedEnumValue": { "setValues": [ "visa" ], "unsetValues": [ "american_express" ] } } ], "address": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } }
-
Skoro masz już identyfikator lokalizacji, możesz wybrać odpowiednią ofertę. Aby pobrać Opublikuj ofertę, wymień obecne
localPosts
dla lokalizacji i filtruj dlatopicType
zOFFER
, aby znaleźć treść oferty którego chcesz użyć.Oto przykład żądania wyświetlenia listy aktywnych postów lokalnych w przypadku danej lokalizacji:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
Poniższy przykład pokazuje
OFFER
localPost
w .Rozwiń, aby zobaczyć przykładową odpowiedź.
{ "localPosts": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680", "languageCode": "en", "summary": "Buy One Get One Free on all order-ahead bento boxes today!", "state": "LIVE", "event": { "title": "Bento BOGO", "schedule": { "startDate": { "year": 2020, "month": 1, "day": 20 }, "startTime": {}, "endDate": { "year": 2021, "month": 1, "day": 21 }, "endTime": {} } }, "updateTime": "2020-09-11T10:56:22.594Z", "createTime": "2020-09-11T10:56:22.594Z", "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680", "media": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS", "mediaFormat": "PHOTO", "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS" } ], "topicType": "OFFER", "offer": { "couponCode": "BOGO-JET-CODE", "redeemOnlineUrl": "https://www.example.com/redeem", "termsConditions": "Offer only valid for order-ahead orders placed online." } }, ], }
- Utwórz pole
<div>
w panelu bocznym i wypełnij je odpowiednimi danymi. z obiektulocalPost
.
Dostosowywanie mapy
Wygląd i szczegóły mapy możesz zmienić na kilka sposobów. Możesz na przykład:
- Utwórz własne znaczniki, aby zastąpić domyślne pinezki na mapie.
- Zmień kolory elementów mapy, aby odzwierciedlić swoją markę.
- Decyduj, które ciekawe miejsca mają być wyświetlane (atrakcje, jedzenie, zakwaterowanie itp.) i ich gęstości, aby umożliwić skupienie uwagi użytkowników na lokalizacjach punkty orientacyjne, które pomagają użytkownikom dotrzeć do najbliższej lokalizacji.
Tworzenie niestandardowych znaczników mapy
Znaczniki możesz dostosować, zmieniając kolor domyślny (na przykład pokazując, czy lokalizacja jest obecnie otwarta) lub zastąpienie znacznika obrazem niestandardowym, takim jak logo Twojej marki. Okna informacyjne lub wyskakujące okienka mogą zawierać dodatkowe informacje. np. godziny otwarcia, numer telefonu, a nawet zdjęcia. Możesz też tworzyć niestandardowe znaczniki, które są rastrowe, wektorowe, można przeciągać, a nawet są animowane.
Poniżej znajduje się przykładowa mapa z niestandardowymi znacznikami. (Zobacz kod źródłowy w sekcji Temat znaczników niestandardowych Maps JavaScript API).
Szczegółowe informacje znajdziesz w dokumentacji znaczników dla: JavaScript (witryny), Androida oraz iOS:
Wybieranie stylu mapy
Google Maps Platform pozwala dostosować mapę do stylu, aby ułatwić użytkownikom znaleźć najbliższą lokalizację, dotrzeć tam jak najszybciej i wzmocnić swoją markę. Na przykład możesz zmienić kolory mapy, aby dopasować je do swojej marki i zmniejszyć rozpraszanie uwagi na mapie, kontrolując ciekawe miejsca widoczne dla użytkowników. Google Maps Platform zapewnia też szablonów początkowych map, z których część jest zoptymalizowana pod kątem różnych branż, takich jak podróże, logistyka, nieruchomości i handel detaliczny.
Style mapy można tworzyć i modyfikować w konsoli Google Cloud Style mapy w projekcie.
Rozwiń, aby zobaczyć animacje tworzenia i stylu mapy w Konsola Cloud:
Style map branży
Animacja pokazująca wstępnie zdefiniowane style mapy branżowe, których możesz użyć. Te stanowią optymalny punkt wyjścia dla każdego rodzaju branży. Na przykład parametr Styl mapy sklepów zmniejsza liczbę ciekawych miejsc na mapie, dzięki czemu użytkownicy mogą skupić się lokalizacje, a także punkty orientacyjne, które pomagają im szybko dotrzeć do najbliższej lokalizacji i przekonywać ich,
![Na stronie Styl mapy klikamy przycisk Utwórz nowy styl mapy. Dzień
Nowy styl mapy, użytkownik kliknie przycisk opcji obok każdego
następujące style zoptymalizowane pod kątem branży: Podróże, logistyka, Nieruchomości,
Handel detaliczny. Po kliknięciu każdego przycisku opis stylu mapy
zobacz podgląd zmian.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/ioms_animation.gif?authuser=19&hl=pl)
Ustawienia ciekawych miejsc
Ta animacja ustawia kolor znacznika ciekawych miejsc i zwiększa się gęstości ciekawych miejsc na stylu mapy. Im większa gęstość, tym więcej Na mapie zostaną wyświetlone znaczniki ciekawych miejsc.
![Na stronie Styl mapy klikamy przycisk Utwórz nowy styl mapy. Dzień
Strona Nowy styl mapy w sekcji Utwórz własny styl, klikając przycisk Mapa Google.
zaznaczono. klika przycisk myszy dla stylu Atlas,
a następnie kliknij Otwórz w Edytorze stylów. W edytorze stylów
Ciekawe miejsca, a następnie kliknij element Ikona i ustawisz
na czerwony. Mysz zaznacza pole wyboru Gęstość ciekawego miejsca i wykonuje slajdy.
po prawej stronie, aby osiągnąć maksymalną gęstość. Coraz więcej czerwonego
i znaczniki pojawiają się na podglądzie mapy wraz ze wzrostem gęstości. Porusza się mysz.
do przycisku Zapisz.](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/store-locator/poi_animation.gif?authuser=19&hl=pl)
Każdy styl mapy ma własny identyfikator. Po opublikowaniu stylu w konsoli Cloud odwołujesz się do tego identyfikatora mapy w kodzie, co oznacza, że możesz w czasie rzeczywistym bez refaktoryzacji aplikacji. Nowy wygląd pojawi się automatycznie w w istniejącej aplikacji i używać ich na różnych platformach. Poniższe przykłady pokazują, jak , by dodać identyfikator mapy do strony internetowej za pomocą interfejsu Maps JavaScript API.
Poprzez umieszczenie co najmniej jednego elementu map_ids
w adresie URL skryptu
Maps JavaScript API automatycznie udostępnia te style, aby przyspieszyć mapę
gdy wywołujesz te style w kodzie.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</script>
Poniższy kod wyświetla na stronie internetowej mapę ze stylem. (Nie jest wyświetlany kod HTML
<div id="map"></div>
– w którym miejscu na mapie pojawi się mapa
page.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Więcej informacji o wdrażaniu stylów map w chmurze JavaScript (internet), Android oraz iOS:
Uzyskiwanie statystyk użytkowania
Dzięki analityce możesz uzyskać cenne informacje o tym, jak użytkownicy wchodzą w interakcje z Twoimi lokalizator. W tej sekcji znajdziesz wskazówki dotyczące konfigurowania i monitorowania Google Analytics oraz Analityka profilu firmy umożliwia śledzenie danych, które najbardziej Cię interesują. Szybki konstruktor Użytkownicy Lokalizatora Plus mają dostęp do statystyk w panelu analitycznym, który pomaga analizować i generować statystyki, obraz tego, jak użytkownicy korzystają z lokalizatora sklepów, na podstawie zanonimizowanych danych.
![Analityka Lokalizatora Plus](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/images/locator_analytics.png?authuser=19&hl=pl)
Aby uzyskać dostęp do tego raportu, otwórz raportów zaangażowania w konsoli Cloud. Więcej informacji o tym raporcie znajdziesz w artykule raportów na temat zaangażowania.
Ze względu na możliwości i elastyczność Google Analytics nie będziemy próbowali udostępniać szczegółowe informacje o konfiguracji i użytkowaniu. Zamiast tego udostępnimy kluczową dokumentację dotyczącą z dalszymi informacjami i instrukcjami, a jednocześnie podkreślamy najważniejsze kwestie analityczne swojej aplikacji lokalizatora.
Konfiguracja usługi Google Analytics
Jeśli korzystasz już z Google Analytics w swojej aplikacji, możesz pominąć tę sekcję.
Oto przykład „tagu globalnego”, który należy wkleić w swojej witrynie, by umożliwić Google Analytics.
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/ gtag/js?id=G-XR5B5D4NW0"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XR5B5D4NW0'); </script>
Niezależnie od tego, czy korzystasz z Menedżera tagów Google, czy dodajesz Google Analytics bezpośrednio do witryny, Musisz wiedzieć, jak używać implementacji Google Analytics, aby:
- wywoływania interakcji użytkowników (np. kliknięć), które można mierzyć niezależnie od witryny. odsłony (zdarzenia).
- Wyświetlać nieprzetworzone dane (dane). w istotnych grupach (wymiary lub wymiarach niestandardowych).
Używanie zdarzeń niestandardowych
Oto przykład definiowania zdarzenia niestandardowego w lokalizatorze:
gtag('event', 'location', { 'method': 'address' });
Pamiętaj, aby nazwać event
i method
wystarczająco jasno
aby zrozumieć zdarzenia w raportach. Wywołuj je w konkretnym przypadku,
interakcji, które chcesz mierzyć, np. gdy użytkownik wybierze i prześle
Lista autouzupełniania widoczna na ilustracji poniżej.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_autocomplete_select.png?authuser=19&hl=pl)
Możesz wysłać do Google Analytics następujące wywołanie śledzące, które korzysta ze zdarzenia oraz przez zdefiniowaną przez Ciebie metodę analizy. (każdy parametr zapytania omówimy w osobnym wierszu, aby ułatwić ich czytanie).
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
Poniższy rysunek pokazuje, jak wywołanie Google Analytics jest wyświetlane w oknie inspekcji przeglądarki na karcie Sieć. (Kliknij, aby powiększyć).
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_inspect.png?authuser=19&hl=pl)
Aby sprawdzić, czy niestandardowe tagi zdarzeń są prawidłowo rejestrowane, przejrzyj „Czas rzeczywisty” widok danych w Google Analytics. Na przykład „lokalizacja” wydarzenie skonfigurowane wcześniej dla Autouzupełnianie miejsc pojawia się w Google Analytics w następujący sposób:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_realtime.png?authuser=19&hl=pl)
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_realtime2.png?authuser=19&hl=pl)
Możesz też monitorować zdarzenia w czasie rzeczywistym za pomocą raportu DebugView, jak widać w raporcie na tym rysunku. Pamiętaj, że musisz odczekać 24 godziny, zanim uzyskasz dostęp do pełnego raportu Zdarzenia w Zaangażowanie > Zdarzenia w Google Analytics.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/store-locator/images/event_debug.png?authuser=19&hl=pl)
Możesz też opracować i mierzyć strategie, które pozwolą przyciągnąć więcej klientów do sklepu stacjonarnego lokalizacje z aplikacji lokalizatora. Na przykład Google Analytics udostępnia Wizyty w sklepie stacjonarnym w ramach usługi Analytics, która łączy fizyczne wizyty w sklepie stacjonarnym (z pomiarów w Google Ads) do danych analitycznych z lokalizatora. Możesz też opracować własne własne strategie kierowania aplikacji na lokalizacje, np. oferty online do wykorzystania w sklepach stacjonarnych.
Dane profilu firmy
Oprócz śledzenia zdarzeń, danych i wymiarów, które Cię interesują, W Google Analytics i Profilu Firmy są też dostępne własne dane. Jeśli na przykład dodasz do lokalizatora linki do rezerwacji spotkań i ofert lokalnych, możesz uzyskać dane o tych wyświetleniach i kliknięciach.
Poniżej znajduje się przykładowe żądanie do interfejsów Business Profile API z prośbą o podanie kilku typów
danych. Do śledzenia kliknięć ofert LOCAL_POST_VIEWS_SEARCH
i
Najtrafniejsze wartości będą obejmować LOCAL_POST_ACTIONS_CALL_TO_ACTION
.
Rozwiń, aby zobaczyć przykładowe żądanie.
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights Body: { "locationNames": [ "accounts/111098884960528804666/locations/15899957830169237700" ], "basicRequest": { "metricRequests": [ { "metric": "QUERIES_DIRECT" }, { "metric": "QUERIES_INDIRECT" }, { "metric": "VIEWS_MAPS" }, { "metric": "VIEWS_SEARCH" }, { "metric": "ACTIONS_DRIVING_DIRECTIONS" }, { "metric": "LOCAL_POST_VIEWS_SEARCH" }, { "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION" } ], "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } } }
Rozwiń, aby zobaczyć przykładową odpowiedź.
{ "locationMetrics": [ { "locationName": "accounts/111098884960528804666/locations/15899957830169237700", "timeZone": "Asia/Singapore", "metricValues": [ { "metric": "QUERIES_DIRECT", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "82" } }, { "metric": "QUERIES_INDIRECT", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "1493" } }, { "metric": "VIEWS_MAPS", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "1571" } }, { "metric": "VIEWS_SEARCH", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "631" } }, { "metric": "ACTIONS_DRIVING_DIRECTIONS", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "3" } }, { "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "42" } }, { "metric": "LOCAL_POST_VIEWS_SEARCH", "totalValue": { "metricOption": "AGGREGATED_TOTAL", "timeDimension": { "timeRange": { "startTime": "2021-01-01T01:01:23.045123456Z", "endTime": "2021-04-30T23:59:59.045123456Z" } }, "value": "11" } } ] } ] }
Odpowiedź zawiera dane, a w szczególności:
- 1571 wyświetleń lokalizacji w Mapach Google.
- 631 wyświetleń lokalizacji w wyszukiwarce Google.
- 3 prośby o wskazówki dojazdu do lokalizacji.
- 42 kliknięcia oferty w
LOCAL_POST_ACTIONS_CALL_TO_ACTION
. - 11 wyświetleń lokalnych postów w wyszukiwarce Google.
Kolejna opcja danych obejmuje skorzystanie z opcji Zarezerwuj z Google, aby tworzyć linki działań. Gdy użytkownicy klikają linki do działań utworzone w Zarezerwuj z Google, możesz rejestrować te działania do Google Analytics, co pozwoli Ci śledzić konwersje w tej usłudze. Zobacz dokumentacja śledzenia konwersji .
Niezależnie od wybranej strategii dotyczącej danych pomiary to coś więcej niż tylko sprawdzanie w porównaniu do wskaźników KPI. Liczby pomagają również zrozumieć wpływ tych lokalizatorów korzyści dla firmy. Możesz też porównywać dane z Google Statystyki w lokalizatorze z danymi Profilu Firmy. Na przykład porównując możesz sprawdzić, ilu klientów wyznacza wskazówki dojazdu z lokalizatora Map Google, aby odwiedzić placówki Twojej firmy.
Ulepszam Lokalizator Plus
W zależności od charakteru firmy lub konta użytkowników możesz zapewnić użytkownikom jeszcze lepsze wrażenia.
Wysyłam trasę na urządzenie mobilne
Aby jeszcze bardziej ułatwić użytkownikom kontakt z lokalizacją, możesz wysyłać SMS-y lub e-maile link do wskazówek dojazdu. Po jej kliknięciu aplikacja Mapy Google uruchomi się telefonu, jeśli jest zainstalowana, lub strona maps.google.com wczyta się w przeglądarce urządzenia. Oba te rozwiązania dają użytkownikowi możliwość korzystania z nawigacji zakręt po zakręcie, w tym wskazówki głosowe, jak dotrzeć do celu.
Użyj formatu
mapuje URL-e, by utworzyć adres URL wskazówek dojazdu, jak poniżej, z
Zakodowana w adresie URL nazwa miejsca jako parametr destination
, a identyfikator miejsca jako
destination_place_id
. Tworzenie i używanie aplikacji jest bezpłatne
Mapuje adresy URL, więc nie musisz dołączać klucza interfejsu API w adresach URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Opcjonalnie możesz podać parametr zapytania origin
używający tego samego adresu
jako miejsce docelowe. Jeśli jednak je pominiesz, wskazówki będą rozpoczynały się od bieżącej trasy użytkownika
lokalizację, która może się różnić od lokalizacji, w której korzystali z aplikacji Lokalizator Plus.
Adresy URL Map Google
udostępnia dodatkowe opcje parametrów zapytania, takie jak travelmode
czy
dir_action=navigate
, aby uruchomić trasę z włączoną nawigacją.
Ten klikalny link, który stanowi rozszerzenie przykładowego adresu URL powyżej, ustawia origin
To londyński stadion piłkarski, który wykorzystuje travelmode=transit
do publicznego wyświetlania reklam.
wskazówki dojazdu transportem publicznym do miejsca docelowego.
Aby wysłać SMS-a lub e-maila zawierającego ten URL, aplikacji, takich jak twilio. Jeśli używasz App Engine, możesz wysyłać SMS-y za pomocą usług innych firm lub e-mailem. Więcej informacji: Wysyłanie wiadomości przy użyciu usług innych firm.
wyświetlanie Street View, aby ułatwić użytkownikom wizualizację lokalizacji.
W wielu lokalizacjach na świecie funkcja Street View pozwala wyświetlać lokalizację, dzięki czemu użytkownicy mogą zobaczyć lokalizację jeszcze przed ich przyjazdem. Możesz podać Street View: interactive (internet) lub statyczny (API) w zależności od tego, czy chcesz, aby użytkownicy „rozejrzeli się” w okolicy 360°. Street View jest też dostępne na Android oraz iOS:
Określanie lokalizacji użytkownika za pomocą geolokalizacji
W większości przypadków możesz określić lokalizację użytkownika, korzystając z wbudowanych usług lokalizacyjnych. urządzeń lub przeglądarek. Udostępniamy przykład za pomocą funkcji geolokalizacji HTML5 w przeglądarce, by wyświetlić lokalizację geograficzną użytkownika lub urządzenia na mapie Google. Możesz też uzyskać dokumentację dotyczącą wysyłania próśb o przyznanie uprawnień. i określanie lokalizacji Android oraz iOS. Może się jednak zdarzyć, że będzie Ci potrzebna alternatywa wyszukiwarka lokalizacji; na przykład wtedy, gdy usługi lokalizacyjne urządzenia są wyłączone obaw związanych z podszywaniem się pod kątem lokalizacji urządzenia.
Geolocation API to interfejs API po stronie serwera, który zwraca lokalizację i dokładność. na podstawie informacji o stacjach bazowych i węzłach Wi-Fi dostępnych dla klienta wykryć go. Możesz użyć geolokalizacji jako mechanizmu zapasowego do określania lokalizacji użytkownika. Możesz też użyć jej do sprawdzenia lokalizacji zgłoszonej przez urządzenie.
Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu
W poprzedniej sekcji Podawanie informacji o miejscu: które omówiliśmy przy użyciu Szczegółów miejsc, by dać użytkownikom informacje o Twoich lokalizacjach, takie jak godziny otwarcia, zdjęcia i opinie.
Warto zapoznać się z koszty różnych danych w informacjach o miejscu, które są podzielone na kategorie: Dane podstawowe, Dane kontaktowe i atmosferyczne. Jedną z strategii zarządzania kosztami jest połączenie informacji, które już masz Twoje lokalizacje z aktualnymi informacjami (zwykle danymi podstawowymi i danymi kontaktowymi) z Google, Mapy zawierające np. informacje o tymczasowym zamknięciu, godziny otwarcia w święto, oceny, zdjęcia i opinie użytkowników. Jeśli masz już informacje kontaktowe dla swoich lokalizacji, nie musisz prosić o nie tych pól z sekcji Informacje o miejscu i może ograniczyć żądanie pobrania tylko danych podstawowych lub Pola danych atmosfery w zależności od tego, co chcesz wyświetlić.
Możesz mieć własne dane o miejscach do uzupełnienia lub użycia zamiast nich Szczegóły miejsca. ćwiczenia z programowania dla lokalizatora pełnego stosu przedstawia przykład użycia GeoJSON z bazą danych aby zapisać i pobrać informacje o swojej lokalizacji.