Przegląd
Platforma Map Google jest dostępna w przypadku aplikacji internetowych (JS, TS) oraz aplikacji na Androida i iOS. Oferuje też interfejsy API usług internetowych, które umożliwiają uzyskiwanie informacji o miejscach, wskazówkach dojazdu i odległościach. Przykłady w tym przewodniku są przeznaczone na jedną platformę, ale podajemy linki do dokumentacji dotyczącej implementacji na innych platformach.
Kreator szybkiego tworzenia w konsoli Google Cloud umożliwia szybkie utworzenie lokalizatora, w tym importowanie informacji o firmie z Profilu Firmy i automatyczne umieszczanie linków do rezerwacji spotkań od zewnętrznych dostawców. Interaktywny interfejs umożliwia wygenerowanie kodu i wdrożenie go w Cloud w ciągu kilku minut.
Użytkownicy chcą wyszukiwać produkty i usługi online oraz znajdować najlepsze i najdogodniejsze lokalizacje, aby je odwiedzić, umówić się na spotkanie lub odebrać zamówienie. Użytkownicy chcą jak najszybciej dotrzeć do Twojej lokalizacji, a Ty chcesz zapewnić im bogate wrażenia online, które zwiększą liczbę wizyt w Twoich lokalizacjach fizycznych, zwiększą zadowolenie użytkowników i zmniejszą liczbę telefonów do pomocy. Warto też mierzyć skuteczność lokalizatora, aby dowiedzieć się, czy klienci mogą znaleźć Twoją lokalizację, i zrozumieć, co można poprawić.
Lokalizator Plus – wskazówki i porady dotyczące dostosowywania, które podajemy w tym dokumencie – to zalecane przez nas optymalne połączenie interfejsów API Google Maps Platform, które pozwala tworzyć świetne lokalizatory. Dzięki tym praktykom możesz pomóc użytkownikom znaleźć Twoje lokalizacje na mapie, wyświetlić szczegółowe informacje potrzebne do podjęcia decyzji i podać im wskazówki dojazdu, niezależnie od tego, czy jadą samochodem, rowerem, idą pieszo czy korzystają z transportu publicznego.
Użytkownicy Lokalizatora Plus mogą korzystać z panelu analitycznego, który pomaga analizować dane i generować statystyki, dając jasny obraz tego, jak dobrze kupujący korzystają z lokalizatora sklepów. Aby uzyskać dostęp do tego raportu, otwórz sekcję Raporty dotyczące zaangażowania w konsoli. Więcej informacji o tym raporcie znajdziesz w artykule Raporty zaangażowania.
Poniższy diagram przedstawia podstawowe interfejsy API, które są używane do implementacji Lokalizatora Plus. Diagram pokazuje też bazę danych z Twoimi danymi o lokalizacji, które możesz połączyć z informacjami o miejscu, aby zapewnić użytkownikom jak najlepszy i najbardziej kompletny zestaw informacji. (Kliknij, aby powiększyć).
Włączam interfejsy API
Aby wdrożyć te rozwiązania, musisz włączyć w konsoli Google Cloud te interfejsy API: Więcej informacji o konfiguracji znajdziesz w artykule Pierwsze kroki z Google Maps Platform.Sekcje implementacji
W tym dokumencie omówimy te praktyki i dostosowania:
- Ikona znacznika wyboru oznacza podstawową praktykę.
- Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie, które ulepsza rozwiązanie.
| Wyświetlanie lokalizacji na interaktywnej mapie |
Utwórz mapę, która umożliwia użytkownikom wyświetlanie szczegółów lokalizacji, przesuwanie, powiększanie i pomniejszanie. Możesz też zapoznać się z rozwiązaniem Szybki konstruktor Lokalizator Plus, aby szybko utworzyć mapę, m.in. zaimportować informacje o firmie z profilu firmy, umieścić linki do rezerwacji spotkań i wdrożyć rozwiązanie w Google Cloud Storage. |
|
| Podawanie szczegółowych informacji o miejscu | Gdy użytkownicy znajdą na mapie najbliższe lokalizacje, podaj im przydatne informacje o miejscu, aby pomóc im w podjęciu decyzji. | |
| Wyświetlanie lokalizacji z widoku pod kątem 45° | Zapewnij użytkownikom lepszy widok Twojej lokalizacji w widoku satelitarnym pod kątem 45 stopni. | |
| Określanie lokalizacji użytkownika | Dodaj funkcję wpisywania na bieżąco, aby poprawić wrażenia użytkowników na wszystkich platformach i zwiększyć dokładność adresów przy minimalnej liczbie naciśnięć klawiszy. | |
| Wyświetlanie czasu podróży i odległości do najbliższych lokalizacji | Obliczaj odległość i czas podróży dla wielu punktów początkowych i docelowych, opcjonalnie określając różne formy transportu, takie jak pieszo, samochodem lub rowerem. | |
| Pomoc użytkownikom w rezerwowaniu terminów |
Umożliwiaj użytkownikom rezerwowanie spotkań w panelu bocznym z informacjami o miejscu. Możesz też zapoznać się z rozwiązaniem Szybki konstruktor Lokalizator Plus, aby szybko utworzyć mapę, m.in. zaimportować informacje o firmie z profilu firmy, umieścić linki do rezerwacji spotkań i wdrożyć rozwiązanie w Google Cloud Storage. |
|
| Wyświetlanie ofert lokalnych | Wyświetlaj użytkownikom klikalne oferty lokalne w panelu bocznym z informacjami o miejscu. | |
| podawanie wskazówek nawigacyjnych, | Uzyskuj dane o trasie z miejsca początkowego do miejsca docelowego przy użyciu różnych środków transportu, takich jak pieszo, samochodem, rowerem i transportem publicznym. | |
| Dostosowywanie mapy | Twórz niestandardowe znaczniki mapy, aby wyróżnić swoje lokalizacje, i dostosuj styl mapy do kolorów swojej marki. Wyświetlaj (lub ukrywaj) na mapie konkretne ciekawe miejsca, aby ułatwić użytkownikom orientację, i kontroluj ich zagęszczenie, aby mapa była czytelna. | |
| Uzyskiwanie statystyk wykorzystania dzięki statystykom | Skonfiguruj i używaj Google Analytics, aby uzyskiwać statystyki dotyczące strategii i implementacji lokalizatora. | |
| Wysyłanie wskazówek dojazdu na urządzenie mobilne | Oprócz wyświetlania wskazówek dojazdu w lokalizatorze możesz też wysyłać je na telefon użytkownika, aby mógł korzystać z nawigacji w Mapach Google, gdy jest w drodze. | |
| Wyświetlanie Street View, aby pomóc użytkownikom wizualizować lokalizacje | Udostępniaj użytkownikom zdjęcia Street View z widokami sferycznymi, aby ułatwić im orientację i pomóc im szybciej znaleźć Twoje lokalizacje. | |
| Określanie lokalizacji użytkownika za pomocą geolokalizacji | Jeśli nie chcesz polegać na usługach lokalizacyjnych na urządzeniu, użyj geolokalizacji, aby określić lokalizację użytkownika. | |
| Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu | Połącz własne niestandardowe informacje o lokalizacji ze szczegółami miejsca, aby zapewnić użytkownikom bogaty zestaw danych ułatwiający podejmowanie decyzji. |
wyświetlanie lokalizacji na interaktywnej mapie,
Lokalizator jest ważnym elementem wygody użytkowników. Niektóre witryny mogą jednak nie mieć nawet mapy, co wymaga od użytkowników opuszczenia witryny lub aplikacji w celu znalezienia lokalizacji w pobliżu. Oznacza to, że użytkownicy muszą przechodzić między stronami, aby uzyskać potrzebne informacje, co nie jest dla nich wygodne. Zamiast tego możesz ulepszyć te wrażenia, umieszczając i dostosowując mapy w swoich aplikacjach.
Możesz włączyć tę funkcję na 2 sposoby: używając rozwiązania Lokalizator Plus w Szybkim kreatorze, aby udostępnić ją od razu, lub używając własnej implementacji Map dynamicznych. W tej sekcji szczegółowo opisujemy te opcje.
Korzystanie z Szybkiego konstruktora – Lokalizatora Plus
Możesz użyć rozwiązania Lokalizator Plus w Szybkim kreatorze, aby zaimportować informacje o firmie z jej profilu. Teraz zmiana danych firmy w profilu firmy będzie odzwierciedlana w lokalizatorze sklepów w Twojej witrynie. Zmiany mogą dotyczyć godzin otwarcia, informacji kontaktowych, zdjęć, opcji usług i innych elementów. Kreator Quick Builder umożliwia szybkie skonfigurowanie lokalizacji firmy na mapie, wygenerowanie kodu do wdrożenia lub bezpośrednie wdrożenie w Google Cloud Storage w ciągu kilku minut.
Używanie własnej implementacji Map dynamicznych
| Ten przykład korzysta z: Maps JavaScript API | Dostępne też na: Android | iOS |
Dodanie do strony mapy dynamicznej, czyli mapy, którą użytkownicy mogą przesuwać, powiększać i pomniejszać oraz na której mogą uzyskiwać szczegółowe informacje o różnych lokalizacjach i miejscach, wymaga tylko kilku wierszy kodu.
Najpierw musisz dołączyć do strony interfejs Maps JavaScript API.
W tym celu dodaj do strony HTML link do tego skryptu, w tym libraries=marker, aby móc dodawać do mapy zaawansowane znaczniki.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
Adres URL odwołuje się do funkcji JavaScriptu initMap, która jest uruchamiana po wczytaniu strony. W adresie URL możesz też określić język lub region mapy, aby mieć pewność, że jest ona sformatowana w odpowiedni sposób dla konkretnego kraju, na który kierujesz reklamy. Ustawienie regionu zapewnia też, że zachowanie aplikacji używanych poza Stanami Zjednoczonymi jest dostosowane do ustawionego regionu. Pełną listę obsługiwanych języków i regionów znajdziesz w szczegółach dotyczących zasięgu Google Maps Platform. Dowiedz się też więcej o używaniu parametru region.
Następnie potrzebujesz elementu HTML div z określoną wysokością, aby umieścić mapę na stronie.
To jest kontener, w którym wyświetlana jest mapa.
<div id="map" style="height: 500px; width: 100%;"></div>
Następnym krokiem jest skonfigurowanie podstawowych funkcji mapy. Odbywa się to w funkcji skryptu initMap określonej w adresie URL skryptu. W tym skrypcie, pokazanym w przykładzie poniżej, możesz ustawić początkową lokalizację, identyfikator mapy (wymagany w przypadku znaczników zaawansowanych i definiowania stylów map w Google Cloud), typ mapy oraz elementy sterujące, które będą dostępne na mapie dla użytkowników. Zwróć uwagę, że getElementById() odwołuje się do identyfikatora „map” div w poprzednim przykładzie.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
W przypadku lokalizatora zwykle trzeba ustawić początkową lokalizację, punkt środkowy lub granice oraz poziom powiększenia (jak bardzo mapa jest powiększona w tej lokalizacji). Większość innych elementów, takich jak dostrajanie elementów sterujących, jest opcjonalna, ponieważ to Ty określasz poziom interakcji z mapą.
Uzyskiwanie identyfikatorów miejsc
| Ten przykład korzysta z: Places API (nowość) | Dostępne też w: JavaScript |
Prawdopodobnie masz bazę danych swoich lokalizacji z podstawowymi informacjami, takimi jak nazwa, adres i numer telefonu. Aby pobrać informacje o danym miejscu z Google Maps Platform, w tym współrzędne geograficzne i informacje przesłane przez użytkowników, znajdź identyfikator miejsca, który odpowiada każdej lokalizacji w Twojej bazie danych. Możesz wywołać punkt końcowy Wyszukaj tekst (New) w Places API (New) i poprosić o pole places.id w masce pola, aby aktywować SKU Wyszukaj tekst Essentials IDs Only.
Oto przykład żądania identyfikatora miejsca dla biura Google w Londynie:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'Możesz zapisać ten identyfikator miejsca w swojej bazie danych i używać go jako skutecznego sposobu na uzyskiwanie informacji o miejscu. Poniżej znajdziesz instrukcje używania identyfikatora miejsca do geokodowania, pobierania informacji o miejscu i wyznaczania trasy do miejsca.
Geokodowanie lokalizacji
| Ten przykład korzysta z: Geocoding API | Dostępne też w: JavaScript |
Jeśli Twoja baza danych lokalizacji zawiera adresy, ale nie współrzędne geograficzne, użyj interfejsu Geocoding API, aby uzyskać szerokość i długość geograficzną danego adresu i umieścić znacznik na mapie. Możesz geokodować adresy po stronie serwera, przechowywać szerokość i długość geograficzną w bazie danych i odświeżać je co najmniej raz na 30 dni.
Oto przykład użycia interfejsu Geocoding API do uzyskania szerokości i długości geograficznej 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_aDodawanie lokalizacji do mapy
Następnym krokiem jest dodanie lokalizacji do mapy. Zwykle polega to na dodaniu do mapy zaawansowanych znaczników, ale możesz też skorzystać z innych opcji, takich jak warstwy danych.
Gdy masz już szerokość i długość geograficzną lokalizacji, możesz dodać do mapy zaawansowany znacznik z niestandardowym glifem tekstowym, jak w tym przykładzie:
const pin = new google.maps.marker.PinElement({ glyphText: "A", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.146550 }, title: "Location Name", }); marker.append(pin);
Dzięki kilku znacznikom możesz zobaczyć lokalizację wielu miejsc jednocześnie.
Jeśli lokalizacji jest dużo, możesz rozważyć użycie narzędzia do klasteryzacji znaczników w JavaScript, Android lub iOS. Oto przykład rozwiązania do łączenia znaczników w klastry w przykładowym lokalizatorze sklepów w JavaScript na GitHubie.
podawanie informacji o miejscu,
| Ten przykład korzysta z: Maps JavaScript API | Dostępne również: Places API (nowy) | Android | iOS |
Możesz udostępniać informacje o miejscu, których potrzebują użytkownicy, zanim odwiedzą jedną z Twoich lokalizacji. Dzięki szczegółowym informacjom o miejscu, takim jak dane kontaktowe, godziny otwarcia, oceny, zdjęcia i stan tymczasowego zamknięcia, użytkownicy wiedzą dokładnie, czego mogą się spodziewać, gdy odwiedzą Twoją lokalizację. Po wywołaniu Places API (New) możesz filtrować i renderować odpowiedź w oknie informacyjnym, na pasku bocznym w przeglądarce lub w dowolny inny sposób.
Aby poprosić o informacje o miejscu, musisz podać identyfikator miejsca dla każdej ze swoich lokalizacji. Aby pobrać identyfikator miejsca, zapoznaj się z artykułem Pobieranie identyfikatorów miejsc.
Rozwiń, aby zobaczyć filmy o wysyłaniu żądań dotyczących informacji o miejscu:
Sprawdzanie godzin otwarcia
Sprawdź zamknięcia
Kontrola kosztów
Poniższy przykład używa klasy Place w bibliotece Miejsc interfejsu Maps JavaScript API, aby pobrać informacje o miejscu i dodać je do okna informacyjnego. Ta implementacja wykorzystuje strategię oszczędzania kosztów polegającą na wywoływaniu żądania informacji o miejscu tylko wtedy, gdy użytkownik poprosi o szczegóły, klikając znacznik, zamiast pobierać szczegóły wszystkich lokalizacji niezależnie od zainteresowania użytkownika.
const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.14655 }, }); const place = new google.maps.places.Place({ id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", }); const infowindow = new google.maps.InfoWindow(); marker.addEventListener("click", async () => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "rating", "websiteURI"], }); infowindow.setContent( "<div><strong>" + place.displayName + "</strong><br>" + place.formattedAddress + "<br>" + "Rating: " + place.rating + " stars<br>" + place.websiteURI + "</div>" ); infowindow.open({ map, anchor: marker, }); });
Wyświetlanie lokalizacji w widoku pod kątem 45°
| Ten przykład korzysta z: Maps JavaScript API | Dostępne też na: Android | iOS |
Widok z lotu ptaka pozwala użytkownikom lepiej poznać wygląd Twojej lokalizacji, co ułatwia jej znalezienie. Gdy użytkownik wybierze pojedynczą lokalizację, aby zobaczyć więcej szczegółów, możesz powiększyć tę lokalizację, aby wyświetlić dostępne zdjęcia satelitarne pod kątem 45°.
Poniższy przykładowy kod ustawia mapę na wysoki poziom powiększenia, zgodny typ mapy i kąt nachylenia, który wyświetli zdjęcia pod kątem 45°, jeśli są dostępne. Szczegółowe informacje o dostępności zdjęć pod kątem 45° znajdziesz w dokumentacji.
function seeDetail(location) {
map.setCenter(location);
map.setZoom(19);
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
map.setTilt(45);
}Resetowanie do oryginalnego widoku mapy
Użytkownicy często chcą przełączać się między widokiem szczegółowym pojedynczej lokalizacji a widokiem podsumowania kilku pobliskich lokalizacji. Aby to ułatwić, dodaj detektor, który wykryje, kiedy użytkownik opuści widok szczegółowy w interakcjach z mapą lub w widoku listy. Na przykład nasłuchiwanie zdarzenia zoom_changed w obiekcie map wskazuje, że użytkownik ręcznie pomniejszył widok szczegółowy lub wywołał inną funkcję, która zaktualizowała poziom powiększenia. W tym przykładzie pomniejszenie powoduje przywrócenie pierwotnego typu i nachylenia mapy.
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
| Ten przykład korzysta z: Maps JavaScript API | Dostępne też na: Android | iOS |
Kolejnym kluczowym elementem każdego lokalizatora jest określenie lokalizacji początkowej użytkownika. Domyślnie możesz używać usług lokalizacyjnych na urządzeniach mobilnych i geolokalizacji w przeglądarce, aby prosić użytkowników o zgodę użytkownika na ustawienie miejsca rozpoczęcia jako bieżącej lokalizacji użytkownika. Użytkownik może jednak odmówić przyznania tych uprawnień lub ustawić inną lokalizację jako punkt początkowy.
Dzisiejsi użytkownicy są przyzwyczajeni do funkcji autouzupełniania w konsumenckiej wersji Map Google. Tę funkcję można zintegrować z dowolną aplikacją za pomocą bibliotek Miejsc Google Maps Platform na urządzeniach mobilnych i w internecie. Gdy użytkownik wpisuje adres, autouzupełnianie wypełnia resztę za pomocą widżetów. Możesz też udostępnić własną funkcję autouzupełniania, korzystając bezpośrednio z interfejsu Place Autocomplete Data API.
Aby dodać do witryny bibliotekę autouzupełniania miejsc, wystarczy dodać kilka parametrów zapytania do adresu URL skryptu interfejsu Maps JavaScript API. W tym przykładzie dodatek to libraries=places,marker.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
Następnie dodaj do strony element kontenera, do którego zostanie dołączony widżet PlaceAutocompleteElement.
<div id="autocomplete-container"></div>
Na koniec zainicjuj widżet PlaceAutocompleteElement i dołącz go do kontenera. Ograniczenie podpowiedzi autouzupełniania miejsc za pomocą includedPrimaryTypes: ["geocode"] konfiguruje widżet tak, aby akceptował adresy, dzielnice, miasta i kody pocztowe, dzięki czemu użytkownicy mogą podawać dowolny poziom szczegółowości, aby opisać swoje miejsce pochodzenia. Gdy użytkownik wybierze podpowiedź, zostanie wywołane zdarzenie gmp-select i będzie można wywołać place.fetchFields(), aby poprosić o pole location zawierające szerokość i długość geograficzną miejsca, z którego użytkownik rozpoczyna podróż. Użyjesz tych współrzędnych mapy, aby wyśrodkować mapę i wskazać relację lokalizacji z punktem początkowym.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // zoom to the selected location and add an advanced marker. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["location", "formattedAddress"], }); addUserLocation(place); });
W tym przykładzie po wybraniu adresu przez użytkownika wykonywana jest funkcja addUserLocation(). Spowoduje to pobranie lokalizacji dopasowanego wyniku, przeniesienie mapy do tej lokalizacji i dodanie znacznika zaawansowanego.
function addUserLocation(place) { const pin = new google.maps.marker.PinElement({ glyphText: "C", }); // Add an advanced marker to the map. const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: place.location, }); marker.append(pin); // Pan and zoom the map to the marker. map.panTo(place.location); map.setZoom(12); }
Możesz wtedy zobaczyć relację między użytkownikiem a konkretnymi lokalizacjami, jak pokazano na obrazie poniżej.
Rozwiń tę sekcję, aby zobaczyć filmy instruktażowe pokazujące, jak dodać autouzupełnianie miejsc do aplikacji:
Witryna
Aplikacje na Androida
Aplikacje na iOS
Wyświetlam czas podróży i odległość do najbliższych lokalizacji
| Ten przykład korzysta z: Routes API | Dostępne są też: Biblioteka tras, Maps JavaScript API |
Gdy poznasz lokalizację użytkownika, możesz ją porównać z lokalizacjami swoich sklepów. Zrobisz to za pomocą funkcji Compute Route Matrix w interfejsie Routes API (lub klasy RouteMatrix w bibliotece Routes Library, Maps JavaScript API). Dzięki temu użytkownicy będą mogli wybrać lokalizację, która jest dla nich najwygodniejsza pod względem czasu dojazdu lub odległości drogowej.
Wyświetlanie lokalizacji w pobliżu użytkownika oznacza, że masz już wypełnione lokalizacje. Jeśli używasz własnej bazy danych lokalizacji, musisz upewnić się, że dane są w formacie, który można wykorzystać na mapie, np. GeoJSON, opisanym w temacie Warstwa danych.
Standardowym sposobem porządkowania listy lokalizacji jest sortowanie ich według odległości. Często odległość ta jest obliczana w linii prostej od użytkownika do lokalizacji, ale może to być mylące. Linia prosta może przebiegać przez rzekę, której nie da się przekroczyć, lub przez ruchliwe drogi, podczas gdy inna lokalizacja może być wygodniejsza. Jest to ważne, gdy masz kilka lokalizacji w odległości kilku kilometrów od siebie.
Metoda computeRouteMatrix pobiera listę lokalizacji początkowych i docelowych oraz zwraca nie tylko odległość, ale też czas podróży między nimi. W przypadku użytkownika punktem początkowym będzie jego bieżąca lokalizacja lub preferowany punkt początkowy, a miejscami docelowymi będą lokalizacje.
Miejsca początkowe i docelowe można określać jako pary współrzędnych, identyfikatory miejsc lub adresy. Możesz używać computeRouteMatrix z ustawieniami trasy, takimi jak TRAFFIC_AWARE, aby wyświetlać wyniki na podstawie bieżącego lub przyszłego czasu jazdy.
W tym przykładzie wywołujemy punkt końcowy computeRouteMatrix w interfejsie Routes API, podając identyfikatory miejsca początkowego i docelowego użytkownika. W tym przykładzie obliczana jest odległość i czas podróży od środka mapy do 3 biur Google w Londynie:
curl -X POST -d '{
"origins": [
{
"waypoint": {
"location": {
"latLng": {
"latitude": 51.493490,
"longitude": -0.097288
}
}
}
}
],
"destinations": [
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
}
},
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
}
},
{
"waypoint": {
"placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
}
}
],
"travelMode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'Odpowiedź z usługi zawiera odległość (w metrach) i czas trwania dla każdej pary miejsca początkowego i docelowego, podobnie jak w tym przykładzie:
Rozwiń, aby zobaczyć przykładową odpowiedź:
[
{
"originIndex": 0,
"destinationIndex": 0,
"status": {},
"distanceMeters": 4540,
"duration": "924s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 1,
"status": {},
"distanceMeters": 5043,
"duration": "1044s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 2,
"status": {},
"distanceMeters": 6919,
"duration": "1357s",
"condition": "ROUTE_EXISTS"
}
]Poniższy obraz przedstawia miejsce początkowe (czerwony znacznik C) i miejsca docelowe na mapie:
Odległość w linii prostej i odległość trasy często się różnią, jak pokazano w tabeli poniżej.
| Lokalizacja | Odległość w linii prostej | Droga w 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 |
Chociaż lokalizacja B jest najbliżej, trasa i czas dojazdu są dłuższe, ponieważ do lokalizacji A można dojechać autostradą.
Po wysłaniu tej prośby możesz przetworzyć dopasowanie, aby uporządkować odpowiedzi według czasu jazdy. Przykłady takiej funkcji znajdziesz w ćwiczeniu z programowania dotyczącym lokalizatora.
podawanie wskazówek dojazdu,
| Ten przykład korzysta z: biblioteki tras, Maps JavaScript API | Dostępna jest też: usługa internetowa Routes API do użytku na urządzeniach z Androidem i iOS, bezpośrednio z aplikacji lub zdalnie przez serwer proxy. |
Wyświetlanie użytkownikom wskazówek dojazdu w Twojej witrynie lub aplikacji oznacza, że nie muszą oni opuszczać Twojej witryny, dzięki czemu nie będą rozpraszani przez inne strony ani nie zobaczą konkurencji na mapie. Dzięki Routes API możesz też prosić o trasy przyjazne dla środowiska, aby oszacować zużycie paliwa lub energii i pokazać wpływ podróży na środowisko.
Klasa Route w bibliotece tras interfejsu Maps JavaScript API zawiera też metody takie jak createPolylines() i createWaypointAdvancedMarkers(), które umożliwiają przetwarzanie wyników i wyświetlanie ich na mapie.
Poniżej znajdziesz przykład żądania i wyświetlania trasy na mapie. Więcej informacji o przykładzie znajdziesz w artykule Wyznaczanie trasy.
Aby dowiedzieć się więcej o tych funkcjach Map, zapoznaj się z dokumentacją interfejsu Maps JavaScript API lub wykonaj krok po kroku instrukcje z ćwiczenia z programowania, aby utworzyć lokalizator.
pomagać użytkownikom w rezerwowaniu spotkań,
Gdy użytkownicy wyświetlają informacje o miejscu w panelu bocznym, możesz im zaoferować wygodną opcję rezerwacji terminu za pomocą kliknięcia przycisku, jak pokazano na ilustracji poniżej.
Możesz to zrobić na kilka sposobów: (1) użyć rozwiązania Lokalizator Plus w Szybkim kreatorze, aby od razu udostępnić tę funkcję, lub (2) użyć Profilu Firmy. W tej sekcji szczegółowo opisujemy te opcje.
Korzystanie z Lokalizatora Plus w Szybkim kreatorze
Możesz użyć rozwiązania Lokalizator Plus w Szybkim kreatorze, aby szybko zaimportować informacje o firmie z Profilu Firmy. Po zaimportowaniu do narzędzia Szybki kreator możesz włączyć wbudowane linki do rezerwacji spotkań (jeśli są dostępne) dla lokalizacji swojej firmy, korzystając z usługi Zarezerwuj z Google. Nawet jeśli nie masz profilu firmy powiązanego z kontem Google, możesz użyć Kreatora, aby umieścić linki do rezerwacji w przypadku firm, które mają już włączoną usługę Rezerwuj z Google* u zewnętrznych dostawców usługi rezerwacji.
*Funkcja Zarezerwuj z Google jest dostępna tylko w wybranych krajach i regionach dla firm, które współpracują z obsługiwanym dostawcą usługi rezerwacji. Jeśli interesuje Cię usługa Zarezerwuj z Google, ale nie współpracujesz z partnerem Google, poproś swojego dostawcę o wypełnienie tego formularza zgłoszenia zainteresowania i zapoznanie się z naszą dokumentacją, aby dowiedzieć się, jak zacząć. Jeśli nie współpracujesz jeszcze z żadnym dostawcą usługi rezerwacji, możesz sprawdzić, którzy dostawcy spełniają wymagania, w sekcji Rezerwacje w Menedżerze Profilu Firmy.
Włączanie rezerwacji spotkań za pomocą Profilu Firmy
Gdy zarządzasz obecnością swojej firmy w internecie za pomocą Profilu Firmy, utworzone przez Ciebie lokalizacje firmy są powiązane z identyfikatorami miejsc w Google Maps Platform, aby umożliwić zintegrowane mapowanie z danymi firmy.
Interfejsy Business Profile API umożliwiają tworzenie działań, takich jak rezerwacja spotkania, które można pobierać i wyświetlać w aplikacjach, ale wymaga to wykonania kilku czynności ręcznych, które opisujemy poniżej.
Gdy użytkownicy wyświetlają w panelu bocznym informacje o miejscu dotyczące jednej z Twoich lokalizacji, możesz udostępnić im link do umówienia się na spotkanie. W tej sekcji dowiesz się, jak to zrobić.
-
Utwórz interfejsy Business Profile API
placeActionLinkdla lokalizacji typuAPPOINTMENT,ONLINE_APPOINTMENTlubDINING_RESERVATION.placeActionLinkbędzie obiektem, którego użyjesz do utworzenia linku do spotkania w panelu bocznym. (Jeśli masz już utworzony link do działania związanego z umawianiem spotkań, przejdź do następnego kroku). Oto przykładowa odpowiedź po udanej operacjiplaceActionLinks.createPOST:{ "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ą informacje o miejscu, widzą szczegóły dotyczące identyfikatora miejsca w Google Maps Platform. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji w Profilu Firmy, więc musisz znaleźć identyfikator lokalizacji na podstawie identyfikatora miejsca na mapie, aby pobrać i wyświetlić utworzony link do rezerwacji spotkań. Wykonaj te wywołania interfejsów Business Profile API:
- Wyświetlanie listy kont projektu
- Wyświetl listę wszystkich lokalizacji na koncie za pomocą interfejsu Business Profile Business Information API.
- Uwzględnij
metadatawreadMask, aby każda zwrócona lokalizacja zawierałametadata.placeId, który możesz porównać z wyświetlanym identyfikatorem miejsca Google Maps Platform.
-
Za pomocą identyfikatora lokalizacji możesz uzyskać odpowiedni link do działania. Aby pobrać istniejące spotkanie
placeActionLink, wyświetl listę istniejącychplaceActionLinksdla lokalizacji i odfiltrujplaceActionType, aby znaleźć link do spotkania, którego chcesz użyć (APPOINTMENT,ONLINE_APPOINTMENTlubDINING_RESERVATION).Poniższy przykład pokazuje obiekt APPOINTMENT
placeActionLinkw odpowiedzi 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 i wypełnij
<div>w panelu bocznym odpowiednimi danymi z obiektuplaceActionLink, zwłaszcza identyfikatorem URI linku do rezerwacji spotkania.
Inne sposoby dodawania linków do umawiania spotkań
Jeśli nie zarządzasz profilem firmy lub nie chcesz korzystać z rozwiązania Lokalizator Plus w Quick Builder, sprawdź dokumentację platformy do rezerwacji terminów, aby dowiedzieć się, jak umieścić widżet rezerwacji w witrynie lub aplikacji. Możesz też użyć Google Cloud, np. Cloud Spanner do zarządzania asortymentem (film).
Wyświetlanie ofert lokalnych
W panelu bocznym informacji o miejscu możesz wyświetlać oferty lokalne, które użytkownicy mogą kliknąć. Interfejs Google My Business API umożliwia tworzenie i pobieranie „wpisów” (np. ofert lokalnych) powiązanych z Twoimi lokalizacjami. Na ilustracji poniżej widać przykład oferty lokalnej w panelu bocznym z informacjami o miejscu.
(Schemat architektury w sekcji Szybki kreator przedstawia technologie, które można wykorzystać do dodawania ofert do lokalizatora).
Oferty lokalne są powiązane z lokalizacjami, więc musisz znaleźć identyfikator lokalizacji w Profilu Firmy, który jest powiązany z identyfikatorem miejsca w Google Maps Platform dla lokalizacji, którą wyświetlają użytkownicy.
Gdy masz identyfikator lokalizacji w Profilu Firmy, możesz pobrać odpowiednią ofertę jako localPost, aby wyświetlić ją w panelu bocznym ze szczegółami miejsca. Aby to zrobić:
- Za pomocą interfejsu Google My Business API utwórz wpisy z ofertami, które chcesz wyświetlać, o typie
OFFER. -
Znajdź lokalizację profilu firmy lub identyfikator lokalizacji powiązany z identyfikatorem miejsca na mapie.
Gdy użytkownicy wyświetlają informacje o miejscu, widzą informacje o identyfikatorze miejsca w Google Maps Platform. Identyfikator miejsca jest powiązany z identyfikatorem lokalizacji w Profilu Firmy, więc musisz znaleźć identyfikator lokalizacji na podstawie identyfikatora miejsca na mapie, aby pobrać i wyświetlić link do oferty lokalnej dla Twojej lokalizacji. Wykonaj te wywołania interfejsów Business Profile API:
- Wyświetl listę kont projektu.
- Wyświetlanie listy wszystkich lokalizacji na koncie za pomocą interfejsu Business Profile Business Information API.
- Uwzględnij
metadatawreadMask, aby każda lokalizacja zawierałametadata.placeId, który możesz porównać z identyfikatorem miejsca wyświetlanej lokalizacji.
Poniższy przykład żąda szczegółów lokalizacji z interfejsu Business Profile Business Information API w wersji 1:
GET https://mybusinessbusinessinformation.googleapis.com/v1/locations/15899957830169237700?readMask=name,title,phoneNumbers,categories,regularHours,storefrontAddress,latlng,openInfo,metadata,profile
Odpowiedź zawiera pole
metadata.placeId, które odpowiada identyfikatorowi miejsca używanemu w żądaniach Google Maps Platform.Rozwiń, aby zobaczyć przykładową odpowiedź.
{ "name": "locations/15899957830169237700", "title": "Sushi Sushi", "phoneNumbers": { "primaryPhone": "+49 2222 22222" }, "categories": { "primaryCategory": { "name": "categories/gcid:restaurant", "displayName": "Restaurant" } }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": { "hours": 9, "minutes": 0 }, "closeDay": "MONDAY", "closeTime": { "hours": 9, "minutes": 10 } }, { "openDay": "TUESDAY", "openTime": { "hours": 11, "minutes": 30 }, "closeDay": "TUESDAY", "closeTime": { "hours": 24, "minutes": 0 } } ] }, "metadata": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "mapsUri": "https://maps.google.com/maps?cid=15899957830169237700" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "storefrontAddress": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } } -
Gdy masz już identyfikatory konta i lokalizacji, pobierz odpowiednią ofertę. Zarządzanie lokalizacją korzysta z interfejsu Business Profile Business Information API w wersji 1, ale wpisy lokalne pozostają w starszym punkcie końcowym
mybusiness.googleapis.com/v4accounts.locations.localPostsw przypadku zatwierdzonych projektów Business Profile API. Wyświetl listę istniejącychlocalPostsdla lokalizacji i przefiltruj wedługtopicTypeo wartościOFFER.Oto przykładowe żądanie wyświetlenia listy aktywnych wpisów lokalnych dla lokalizacji:
GET https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
Poniższy przykład pokazuje
OFFERlocalPostw odpowiedzi.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 i wypełnij
<div>w panelu bocznym odpowiednimi danymi z obiektulocalPost.
Dostosowywanie mapy
Wygląd i szczegóły mapy możesz zmieniać na wiele sposobów. Możesz na przykład:
- Utwórz własne znaczniki niestandardowe, aby zastąpić domyślne pinezki na mapie.
- Zmień kolory elementów mapy, aby odzwierciedlały Twoją markę.
- Możesz kontrolować, które ciekawe miejsca (atrakcje, restauracje, hotele itp.) i w jakim zagęszczeniu mają być wyświetlane. Dzięki temu możesz skupić uwagę użytkowników na swoich lokalizacjach, jednocześnie wyróżniając punkty orientacyjne, które pomogą im dotrzeć do najbliższej lokalizacji.
Tworzenie niestandardowych znaczników mapy
Możesz dostosować znaczniki zaawansowane, zmieniając domyślne tło, obramowanie lub kolor glifu pinezki (np. aby wskazać, czy lokalizacja jest otwarta), zastępując znacznik niestandardową grafiką, np. logo Twojej marki, lub tworząc niestandardowe znaczniki HTML i CSS. Okna informacyjne mogą dostarczać użytkownikom dodatkowych informacji, takich jak godziny otwarcia, numer telefonu czy zdjęcia.
Poniżej znajduje się przykładowa mapa, która używa niestandardowych znaczników graficznych. (Kod źródłowy znajdziesz w temacie dotyczącym niestandardowych znaczników graficznych w Maps JavaScript API).
Szczegółowe informacje znajdziesz w dokumentacji dotyczącej znaczników zaawansowanych na platformach JavaScript (internet), Android i iOS.
Stylizuję mapę
Google Maps Platform umożliwia stylizowanie mapy w sposób, który pomaga użytkownikom znaleźć najbliższą lokalizację i jak najszybciej do niej dotrzeć, a także wzmocnić markę. Możesz na przykład zmienić kolory mapy, aby pasowały do Twojej marki, i ograniczyć elementy rozpraszające uwagę na mapie, kontrolując miejsca, które są widoczne dla użytkowników. Google Maps Platform udostępnia też szereg szablonów map, z których niektóre są zoptymalizowane pod kątem różnych branż, takich jak turystyka, logistyka, nieruchomości i handel detaliczny.
Style mapy możesz tworzyć i modyfikować na stronie Style mapy w projekcie w konsoli Google Cloud.
Rozwiń, aby zobaczyć animacje tworzenia i stylizowania stylu mapy w konsoli Cloud:
Style mapy branżowej
Animacja pokazująca wstępnie zdefiniowane style map dla poszczególnych branż, których możesz używać. Te style stanowią optymalny punkt wyjścia dla każdego typu branży. Na przykład styl mapy „Handel detaliczny” ogranicza liczbę ciekawych miejsc na mapie, dzięki czemu użytkownicy mogą skupić się na Twoich lokalizacjach i punktach orientacyjnych, które pomogą im jak najszybciej i najłatwiej dotrzeć do najbliższej lokalizacji.
Kontrola ciekawych miejsc
Ta animacja ustawia kolor znacznika ciekawych miejsc i zwiększa ich zagęszczenie w stylu mapy. Im większa gęstość, tym więcej znaczników ciekawych miejsc pojawia się na mapie.
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 aktualizować styl mapy w czasie rzeczywistym bez konieczności refaktoryzacji aplikacji. Nowy wygląd automatycznie pojawi się w istniejącej aplikacji i będzie używany na różnych platformach. Poniższe przykłady pokazują, jak dodać identyfikator mapy do strony internetowej za pomocą interfejsu Maps JavaScript API.
Jeśli w adresie URL skryptu uwzględnisz co najmniej 1 map_ids, interfejs Maps JavaScript API automatycznie udostępni te style, aby przyspieszyć renderowanie mapy, gdy wywołasz je 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ę z własnym stylem. (Nie pokazano elementu HTML <div id="map"></div>, w którym mapa pojawi się na stronie).
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Dowiedz się więcej o stosowaniu definiowania stylów map w Google Cloud w JavaScript (sieć), na Android i iOS.
Uzyskiwanie statystyk dotyczących użytkowania dzięki statystykom
Dzięki statystykom możesz uzyskać cenne informacje o tym, jak użytkownicy korzystają z lokalizatora. W tej sekcji znajdziesz wskazówki dotyczące konfigurowania i monitorowania statystyk Google Analytics i Profilu Firmy, które pozwolą Ci śledzić potrzebne dane. Użytkownicy narzędzia Lokalizator Plus w Szybkim kreatorze mogą korzystać z panelu informacyjnego, który pomaga analizować dane i generować statystyki na podstawie zanonimizowanych danych.
Aby uzyskać dostęp do tego raportu, otwórz sekcję raportów o zaangażowaniu w konsoli Cloud. Więcej informacji o tym raporcie znajdziesz w artykule Raporty dotyczące zaangażowania.
Google Analytics oferuje wiele funkcji, dlatego nie będziemy podawać szczegółowych informacji o konfiguracji i użytkowaniu. Zamiast tego wskażemy Ci najważniejsze dokumenty, w których znajdziesz więcej informacji i instrukcji, a także zwrócimy uwagę na najważniejsze kwestie związane z analizą danych w aplikacji lokalizatora.
Konfiguracja usługi Google Analytics
Jeśli używasz już Google Analytics w aplikacji, możesz pominąć tę sekcję.
Poniżej znajduje się przykład „tagu globalnego”, który należy wkleić w witrynie, aby włączyć 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 używasz Menedżera tagów Google, czy dodajesz Google Analytics bezpośrednio do witryny, kluczem jest zrozumienie, jak używać implementacji Google Analytics do:
- wywoływać interakcje użytkowników, np. kliknięcia, które można mierzyć niezależnie od odsłon witryny (zdarzenia);
- Wyświetlaj nieprzetworzone dane (dane) w przydatnych grupach (wymiary lub wymiary niestandardowe).
Używanie zdarzeń niestandardowych
Poniżej znajdziesz przykład definiowania zdarzenia niestandardowego w lokalizatorze:
gtag('event', 'location', { 'method': 'address' });
Ważne jest, aby nazwy event i method były na tyle jasne, aby można było zrozumieć zdarzenia w raportach. Uruchamiaj je w przypadku konkretnych interakcji, które chcesz mierzyć, np. gdy użytkownik wybierze adres z listy rozwijanej autouzupełniania, jak pokazano na ilustracji poniżej.
Możesz wysłać do Google Analytics następujące wywołanie śledzenia, które korzysta ze zdefiniowanego przez Ciebie zdarzenia i metody. (Dla ułatwienia czytania każdy parametr zapytania wyświetlimy w osobnym wierszu).
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
Na poniższym rysunku pokazano, jak to wywołanie Google Analytics wygląda w widoku Zbadaj w przeglądarce na karcie Sieć. (kliknij, aby powiększyć).
Aby sprawdzić, czy tagi zdarzeń niestandardowych są prawidłowo rejestrowane, wyświetl widok „Czas rzeczywisty” w Google Analytics. Na przykład zdarzenie „location” skonfigurowane wcześniej na potrzeby autouzupełniania miejsc pojawia się w Google Analytics, jak pokazano na poniższych ilustracjach.
Możesz też monitorować zdarzenia w czasie rzeczywistym za pomocą raportu DebugView, jak pokazano na ilustracji poniżej. Pamiętaj, że zanim uzyskasz dostęp do pełnego raportu Zdarzenia w sekcji Zaangażowanie > Zdarzenia w Google Analytics, musisz odczekać 24 godziny.
Możesz też opracowywać i mierzyć strategie, które pozwolą Ci zwiększyć ruch w sklepie stacjonarnym dzięki aplikacji lokalizatora. Na przykład Google Analytics oferuje funkcję Wizyty w sklepie stacjonarnym w Analytics, która łączy statystyki wizyt w sklepie stacjonarnym (mierzone przez Google Ads) ze statystykami lokalizatora. Możesz też opracować własne strategie zachęcania użytkowników aplikacji do odwiedzania Twoich sklepów stacjonarnych, np. oferty online, z których można skorzystać w sklepach stacjonarnych.
Dane dotyczące Profilu Firmy
Oprócz śledzenia zdarzeń, danych i wymiarów za pomocą Google Analytics możesz też wysyłać zapytania o wskaźniki zaangażowania dotyczące lokalizacji za pomocą interfejsu Business Profile Performance API.
Dostępne wartości DailyMetric pozwalają śledzić wyświetlenia w wyszukiwarce i Mapach, zapytania o trasę dojazdu, kliknięcia prowadzące do witryny i kliknięcia prowadzące do połączenia oraz rezerwacje dokonane za pomocą usługi Zarezerwuj z Google.
Poniższe przykładowe żądanie wywołuje metodę locations.fetchMultiDailyMetricsTimeSeries, aby pobrać dzienne dane dotyczące wyświetleń, zapytań o trasę dojazdu, kliknięć prowadzących do witryny i rezerwacji dla danej lokalizacji:
Rozwiń, aby zobaczyć przykładowe żądanie.
GET https://businessprofileperformance.googleapis.com/v1/locations/15899957830169237700:fetchMultiDailyMetricsTimeSeries?dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_SEARCH&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_SEARCH&dailyMetrics=BUSINESS_DIRECTION_REQUESTS&dailyMetrics=WEBSITE_CLICKS&dailyMetrics=BUSINESS_BOOKINGS&dailyRange.start_date.year=2025&dailyRange.start_date.month=1&dailyRange.start_date.day=1&dailyRange.end_date.year=2025&dailyRange.end_date.month=1&dailyRange.end_date.day=31
Rozwiń, aby zobaczyć przykładową odpowiedź.
{
"multiDailyMetricTimeSeries": [
{
"dailyMetricTimeSeries": [
{
"dailyMetric": "BUSINESS_IMPRESSIONS_DESKTOP_MAPS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "48"
}
]
}
},
{
"dailyMetric": "BUSINESS_IMPRESSIONS_MOBILE_MAPS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "112"
}
]
}
},
{
"dailyMetric": "BUSINESS_DIRECTION_REQUESTS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "14"
}
]
}
},
{
"dailyMetric": "WEBSITE_CLICKS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "29"
}
]
}
},
{
"dailyMetric": "BUSINESS_BOOKINGS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "6"
}
]
}
}
]
}
]
}
Każdy wpis dailyMetricTimeSeries zwraca dzienne liczby w żądanym zakresie dat, w tym:
- Wyświetlenia na komputerach i urządzeniach mobilnych w Mapach Google i wyszukiwarce Google.
- prośby o wskazówki dojazdu do lokalizacji firmy (
BUSINESS_DIRECTION_REQUESTS); - kliknięcia prowadzące do witryny firmy (
WEBSITE_CLICKS) i rezerwacje dokonane za pomocą Zarezerwuj z Google (BUSINESS_BOOKINGS).
Inną opcją jest użycie funkcji Zarezerwuj z Google do tworzenia linków do działań. Gdy użytkownicy klikają linki do działań utworzone w Zarezerwuj z Google, możesz rejestrować te działania w Google Analytics, co pozwala śledzić konwersje w tej usłudze. Więcej informacji znajdziesz w dokumentacji śledzenia konwersji.
Niezależnie od stosowanej strategii danych pomiary to coś więcej niż tylko sprawdzanie, jak radzisz sobie z realizacją wskaźników KPI. Liczby te pomogą Ci też zrozumieć, jak te ulepszenia lokalizatora wpływają na Twoją firmę. Możesz też porównać dane z Google Analytics dotyczące lokalizatora z danymi z Profilu Firmy. Porównując te dane, możesz na przykład sprawdzić, ilu klientów uzyskuje wskazówki dojazdu z lokalizatora i Map Google, aby odwiedzić Twoje placówki.
Ulepszanie Lokalizatora Plus
W zależności od potrzeb firmy lub użytkowników możesz jeszcze bardziej poprawić wrażenia użytkowników.
Wysyłanie wskazówek dojazdu na urządzenie mobilne
Aby jeszcze bardziej ułatwić użytkownikom dotarcie do lokalizacji, możesz wysłać im SMS-em lub e-mailem link do wskazówek dojazdu. Gdy klikną link, na ich telefonie uruchomi się aplikacja Mapy Google (jeśli jest zainstalowana) lub w przeglądarce na urządzeniu otworzy się strona maps.google.com. W obu przypadkach użytkownik może skorzystać ze szczegółowych wskazówek dojazdu, w tym wskazówek głosowych, aby dotrzeć do celu.
Użyj adresów URL Map, aby utworzyć adres URL wskazówek dojazdu, taki jak poniżej, z nazwą miejsca zakodowaną w adresie URL jako parametr destination i identyfikatorem miejsca jako parametr destination_place_id. Tworzenie i używanie adresów URL Map jest bezpłatne, więc nie musisz podawać klucza interfejsu API w adresie URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Możesz opcjonalnie podać parametr zapytania origin, używając tego samego formatu adresu co w przypadku miejsca docelowego. Jeśli go pominiesz, wskazówki dojazdu będą zaczynać się od bieżącej lokalizacji użytkownika, która może być inna niż miejsce, w którym korzystał z aplikacji Lokalizator Plus. Adresy URL Map udostępniają dodatkowe opcje parametrów zapytania, takie jak travelmode i dir_action=navigate, które umożliwiają wyświetlanie wskazówek dojazdu z włączoną nawigacją.
Ten klikalny link, który rozszerza przykładowy adres URL powyżej, ustawia origin
jako stadion piłkarski w Londynie i używa travelmode=transit, aby podać wskazówki dojazdu transportem publicznym do miejsca docelowego.
Aby wysłać SMS-a lub e-maila z tym adresem URL, zalecamy użycie aplikacji innej firmy, np. twilio. Jeśli używasz App Engine, możesz korzystać z usług innych firm do wysyłania SMS-ów lub e-maili. Więcej informacji znajdziesz w artykule Wysyłanie wiadomości za pomocą usług innych firm.
wyświetlanie Street View, aby pomóc użytkownikom zobaczyć lokalizacje;
W przypadku wielu lokalizacji na świecie można użyć Street View, aby wyświetlić widok z zewnątrz, dzięki czemu użytkownicy mogą zobaczyć lokalizację, zanim do niej dotrą. Możesz udostępniać Street View w formie interaktywnej (internetowej) lub statycznej (interfejs API) w zależności od tego, czy chcesz, aby użytkownicy mogli „rozejrzeć się” po okolicy w zakresie 360 stopni. Funkcja Street View jest też dostępna na Android i iOS.
Określanie lokalizacji użytkownika za pomocą geolokalizacji
W większości przypadków możesz określić lokalizację użytkownika za pomocą usług lokalizacyjnych wbudowanych w jego urządzenie lub przeglądarkę. Podajemy przykład użycia funkcji geolokalizacji HTML5 w przeglądarce do wyświetlania położenia geograficznego użytkownika lub urządzenia na mapie Google. Dokumentację dotyczącą proszenia o uprawnienia i uzyskiwania lokalizacji znajdziesz w sekcji poświęconej Androidowi i iOS. Mogą jednak wystąpić sytuacje, w których potrzebujesz alternatywnego sposobu określania lokalizacji, np. gdy usługi lokalizacyjne urządzenia są wyłączone lub masz obawy, że lokalizacja urządzenia jest sfałszowana.
Geolocation API to interfejs API po stronie serwera, który zwraca lokalizację i promień dokładności na podstawie informacji o stacjach bazowych i węzłach Wi-Fi, które klient może wykryć. Możesz używać geolokalizacji jako mechanizmu zapasowego do określania lokalizacji użytkownika lub do sprawdzania lokalizacji zgłaszanej przez urządzenie.
Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu
W poprzedniej sekcji Podawanie informacji o miejscu omówiliśmy korzystanie z informacji o miejscu, aby zapewnić użytkownikom bogaty zestaw informacji o Twoich lokalizacjach, takich jak godziny otwarcia, zdjęcia i opinie.
Warto zapoznać się z cenami i poziomami SKU różnych pól danych w Places API (New). Aby zarządzać kosztami, możesz połączyć informacje, które już masz o swoich lokalizacjach, z aktualnymi informacjami z Map Google, takimi jak tymczasowe zamknięcie, godziny otwarcia w święta oraz oceny, zdjęcia i opinie użytkowników. Jeśli masz już dane kontaktowe swoich lokalizacji, nie musisz prosić o te pola w informacjach o miejscu i możesz ograniczyć maskę pola, aby pobierać tylko te pola, które chcesz wyświetlać.
Możesz mieć własne dane o miejscach, które uzupełnią lub zastąpią informacje o miejscu. Ćwiczenie programistyczne dotyczące lokalizatora full-stack zawiera przykład użycia GeoJSON z bazą danych do przechowywania i pobierania własnych informacji o lokalizacji.