Przegląd
Google Maps Platform jest dostępna w wersji internetowej (JS, TS), na Androida i iOS, a także udostępnia interfejsy API usług internetowych do uzyskiwania informacji o miejscach, wskazówek dojazdu i odległości. Przykłady w tym przewodniku są napisane dla jednej platformy, ale podajemy linki do dokumentacji dotyczącej implementacji na innych platformach.
Gdy użytkownicy zobaczą Twoje produkty online, będą chcieli znaleźć najlepszy i najwygodniejszy sposób na złożenie zamówienia. Przewodnik po wdrażaniu lokalizatora produktów i wskazówki dotyczące dostosowywania to zalecana przez Google optymalna kombinacja interfejsów API Google Maps Platform, która pozwala tworzyć atrakcyjne lokalizatory produktów.
Dzięki temu przewodnikowi po implementacji możesz pomóc klientom w znalezieniu szczegółowych informacji potrzebnych do wyszukania Twoich produktów oraz w uzyskaniu wskazówek dojazdu do sklepu, w którym znajduje się dany produkt, niezależnie od tego, czy klient jedzie samochodem, jedzie na rowerze, idzie pieszo czy korzysta z transportu publicznego.
Włącz interfejsy API
Aby wdrożyć lokalizator produktów, musisz włączyć te interfejsy API w konsoli Google Cloud. Poniższe hiperlinki przekierowują do konsoli Google Cloud, w której możesz włączyć poszczególne interfejsy API w wybranym projekcie:
Więcej informacji o konfiguracji znajdziesz w artykule Pierwsze kroki z Google Maps Platform.
Sekcje przewodnika po implementacji
Omawiamy tu te implementacje i dostosowania:
- Ikona wyboru to podstawowy krok implementacji.
- Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie, które zwiększa skuteczność rozwiązania.
| Powiązywanie lokalizacji sklepów z miejscami w Google Maps Platform | Dopasuj lokalizację sklepu do miejsca w Google Maps Platform. | |
| Określanie lokalizacji użytkownika | Dodaj funkcję wpisywania w trakcie pisania, aby zwiększyć wygodę użytkowników na wszystkich platformach i poprawić dokładność adresów przy minimalnej liczbie naciśnięć klawiszy. | |
| Znajdowanie najbliższych sklepów | Obliczaj odległość i czas podróży dla wielu punktów początkowych i docelowych, opcjonalnie określając różne środki transportu, takie jak pieszy, samochód, transport publiczny lub jazda na rowerze. | |
| Wyświetlanie informacji o sklepie | Wyświetlaj szczegółowe informacje o swoich sklepach, aby ułatwić użytkownikom do nich dotarcie. | |
| Podawanie wskazówek dojazdu | Uzyskuj dane dotyczące wskazówek dojazdu z miejsca początkowego do miejsca docelowego różnymi środkami transportu, takimi jak pieszy, samochód, rower i transport publiczny. | |
| Wyślij wskazówki dojazdu na telefon | Oprócz wyświetlania wskazówek dojazdu na stronie internetowej możesz też wysyłać je na telefon użytkownika, aby mógł korzystać z nawigacji w Mapach Google w podróży. | |
| Wyświetlanie lokalizacji na interaktywnej mapie | 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 określone ważne miejsca, aby ułatwić użytkownikom orientację, i kontroluj ich gęstość, aby uniknąć przeładowania mapy. | |
| Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu | Połącz własne niestandardowe szczegóły lokalizacji z informacjami o miejscu, aby zapewnić użytkownikom bogaty zestaw danych do podejmowania decyzji. |
Łączenie lokalizacji sklepów z miejscami w Google Maps Platform
Pobieranie identyfikatorów miejsc
| Ten przykład korzysta z: Places API (nowość) | Dostępne również: JavaScript |
Możesz mieć bazę danych swoich sklepów z podstawowymi informacjami, takimi jak nazwa lokalizacji, adres i numer telefonu. Chcesz powiązać ją z miejscem na platformie Google Maps jako zestawem miejsc docelowych, w których użytkownicy mogą odbierać produkty. Aby pobrać informacje o danym miejscu dostępne w Google Maps Platform, w tym współrzędne geograficzne i informacje dodane przez użytkowników, znajdź identyfikator miejsca
odpowiadający każdemu ze sklepów w Twojej bazie danych.
Możesz wywołać
punkt końcowy Wyszukiwanie tekstowe (nowe) w interfejsie Places API (nowym) i w masce pola zażądać tylko pola places.id (co wywoła Wyszukiwanie tekstowe – Essentials – tylko identyfikatory).
Poniżej znajdziesz 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 bazie danych wraz z pozostałymi danymi sklepu i używać go jako skutecznego sposobu na wysyłanie próśb o informacje o sklepie. Poniżej znajdziesz instrukcje dotyczące używania identyfikatora miejsca do geokodowania, pobierania informacji o miejscu i wyznaczania do niego trasy.
Geokodowanie lokalizacji
| Ten przykład korzysta z: Geocoding API | Dostępne również: JavaScript |
Jeśli Twoja baza danych sklepów zawiera adresy, ale nie ma współrzędnych geograficznych, użyj interfejsu Geocoding API, aby uzyskać szerokość i długość geograficzną adresu na potrzeby obliczania, które sklepy są najbliżej klienta. Możesz geokodować sklep po stronie serwera, przechowywać szerokości i długości geograficzne w bazie danych oraz odświeżać dane 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:
```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
```
określanie lokalizacji użytkownika,
| Ten przykład korzysta z: Autouzupełniania miejsc w Maps JavaScript API | Dostępne również na: Android | iOS |
Kluczowym elementem lokalizatora produktów jest określenie lokalizacji początkowej użytkownika. Możesz zaoferować użytkownikowi 2 opcje określania lokalizacji początkowej: wpisanie miejsca rozpoczęcia wyszukiwania lub przyznanie uprawnień do geolokalizacji w przeglądarce internetowej lub usług lokalizacyjnych na urządzeniu mobilnym.
Obsługa wpisywanych danych za pomocą autouzupełniania
Obecni 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 wpisze adres, autouzupełnianie wypełni resztę za pomocą widżetów. Możesz też udostępnić własną funkcję autouzupełniania bezpośrednio za pomocą interfejsu Place Autocomplete Data API.
W tym przykładzie dodaj do witryny biblioteki Places i Marker, dodając parametr libraries=places,marker do adresu URL skryptu interfejsu Maps JavaScript API.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_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 prognoz autouzupełniania miejsca za pomocą includedPrimaryTypes: ["geocode"] konfiguruje widżet tak, aby akceptował adresy ulic, dzielnice, miasta i kody pocztowe, dzięki czemu użytkownicy mogą wprowadzać dowolny poziom szczegółowości, aby opisać swoje miejsce pochodzenia. Gdy użytkownik wybierze prognozę, zostanie wywołane zdarzenie gmp-select i możesz wywołać funkcję place.fetchFields(), aby poprosić o pole location zawierające szerokość i długość geograficzną miejsca pochodzenia użytkownika. Użyjesz tych współrzędnych mapy, aby określić relację między lokalizacjami a 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, // fetch the place details and search for the nearest stores. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["id", "location", "formattedAddress"], }); searchFromOrigin(place); }); }
W tym przykładzie po wybraniu adresu przez użytkownika uruchamia się funkcja searchFromOrigin(). W tym przypadku lokalizacja dopasowanego wyniku jest lokalizacją użytkownika, a następnie wyszukiwane są najbliższe lokalizacje na podstawie tych współrzędnych jako punktu początkowego. Więcej informacji znajdziesz w sekcji Określanie najbliższych sklepów.
Rozwiń tę sekcję, aby zobaczyć filmy z instrukcjami dodawania autouzupełniania miejsc do aplikacji:
Witryna
Aplikacje na Androida
Aplikacje na iOS
Korzystanie z geolokalizacji przeglądarki
Aby poprosić o lokalizację geograficzną przeglądarki HTML5 i ją obsłużyć, dowiedz się, jak włączyć okno Użyj mojej lokalizacji:
Znajdź najbliższe sklepy
| Ten przykład korzysta z: Biblioteka tras, Maps JavaScript API | Dostępne są też: Routes API |
Gdy poznasz lokalizację użytkownika, możesz ją porównać z lokalizacjami swoich sklepów. Użycie w tym celu
RouteMatrix
klasy w bibliotece Routes interfejsu Maps JavaScript API (lub funkcji
Compute Route
Matrix w interfejsie Routes API) pomoże użytkownikom wybrać lokalizację, która jest dla nich najwygodniejsza pod względem czasu dojazdu lub odległości drogowej.
Standardowym sposobem porządkowania listy lokalizacji jest sortowanie ich według odległości. Często odległość jest obliczana po prostu w linii prostej od użytkownika do lokalizacji, ale może to być mylące. Linia prosta może przebiegać nad nieprzejezdną rzeką lub przez ruchliwe drogi w czasie, gdy inne miejsce może być wygodniejsze. Jest to ważne, gdy masz kilka lokalizacji w odległości kilku kilometrów od siebie.
Metoda RouteMatrix.computeRouteMatrix przyjmuje listę lokalizacji początkowych i docelowych i zwraca nie tylko odległość, ale też czas podróży między nimi. W przypadku użytkownika punktem początkowym będzie miejsce, w którym się obecnie znajduje, lub wybrany punkt początkowy, a miejscami docelowymi będą lokalizacje. Punkty początkowe i docelowe można określać jako pary współrzędnych, identyfikatory miejsc lub adresy. Możesz użyć
RouteMatrix.computeRouteMatrix z preferencjami dotyczącymi wyznaczania trasy, np.
TRAFFIC_AWARE, aby wyświetlać wyniki na podstawie aktualnego lub przyszłego czasu dojazdu.
W tym przykładzie wywoływana jest funkcja RouteMatrix.computeRouteMatrix w bibliotece Routes API w Maps JavaScript API. Określa ona miejsce docelowe użytkownika i maksymalnie 25 lokalizacji sklepów naraz.
async function getDistances(originLocation) { const { RouteMatrix } = await google.maps.importLibrary("routes"); const request = { origins: [originLocation], destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, routingPreference: "TRAFFIC_AWARE", fields: ["distanceMeters", "durationMillis", "condition"], }; return RouteMatrix.computeRouteMatrix(request); } function update(location) { if (!location) { return; } // ... // sort by spherical distance stores.sort((a, b) => { return ( google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(a.location), location ) - google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(b.location), location ) ); }); // display travel distance and time getDistances(location) .then(({ matrix }) => { const items = matrix.rows[0].items; for (let i = 0; i < items.length; i++) { if (items[i].condition === "ROUTE_EXISTS") { stores[i].travelDistance = items[i].distanceMeters; stores[i].travelDuration = items[i].durationMillis; } } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
W przypadku każdej lokalizacji w pobliżu możesz wyświetlać stan zapasów produktu na podstawie bazy danych asortymentu.
Wyświetlanie informacji o sklepie
| Ten przykład korzysta z: Biblioteki miejsc w Maps JavaScript API | Dostępne są też: Places SDK na Androida | Places SDK na iOS | Places API (nowy) |
Możesz udostępniać szczegółowe informacje o miejscu, takie jak dane kontaktowe, godziny otwarcia i aktualny stan otwarcia, aby pomóc klientom wybrać preferowaną lokalizację lub sfinalizować zamówienie.
Po wywołaniu interfejsu Maps JavaScript API w celu uzyskania informacji o miejscu możesz filtrować i renderować odpowiedź.
Aby poprosić o informacje o miejscu, musisz mieć identyfikator miejsca każdej z Twoich lokalizacji. Aby pobrać identyfikator miejsca, w którym znajduje się Twoja firma, zapoznaj się z artykułem Pobieranie identyfikatorów miejsc.
Poniższe żądanie informacji o miejscu korzysta z klasy Place, aby zwrócić nazwę, współrzędne, witrynę, numer telefonu, ocenę i godziny otwarcia dla identyfikatora miejsca Google w Londynie:
const place = new google.maps.places.Place({ id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', });await place.fetchFields({ fields: [ 'displayName', 'nationalPhoneNumber', 'location', 'regularOpeningHours', 'rating', 'utcOffsetMinutes', 'websiteURI', ], });
createMarker(place);
Ulepszony lokalizator produktów
W zależności od potrzeb firmy lub użytkowników możesz dodatkowo ulepszyć ich doświadczenia.
wyznaczanie trasy,
| Ten przykład korzysta z: Biblioteka tras, Maps JavaScript API | Dostępne są też: Routes API usługa internetowa do użytku na Androidzie i iOS, bezpośrednio z aplikacji lub zdalnie przez serwer proxy. |
Gdy wyświetlasz użytkownikom wskazówki dojazdu w swojej witrynie lub aplikacji, nie muszą oni opuszczać Twojej witryny i rozpraszać się innymi stronami ani widzieć konkurencji na mapie. Za pomocą interfejsu Routes API możesz też wysyłać żądania dotyczące tras przyjaznych dla środowiska, aby szacować zużycie paliwa lub energii i pokazywać wpływ podróży na środowisko.
KlasaRoute w bibliotece Routes API w Maps JavaScript API ma 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 Pobieranie trasy.
Wysyłanie trasy na urządzenie mobilne
Aby jeszcze bardziej ułatwić użytkownikom dotarcie do lokalizacji, możesz wysłać im SMS-a lub e-maila z linkiem do wskazówek dojazdu. Gdy klikną ten link, na ich telefonie uruchomi się aplikacja Mapy Google (jeśli jest zainstalowana) lub w przeglądarce internetowej na urządzeniu otworzy się strona maps.google.com. W obu przypadkach użytkownik może skorzystać ze szczegółowej nawigacji, w tym ze wskazówek głosowych, aby dotrzeć do miejsca docelowego.
Użyj
adresów URL Map, aby utworzyć adres URL z wskazówkami dojazdu, np. taki jak ten poniżej, z zakodowaną w adresie URL nazwą miejsca jako parametrem destination i identyfikatorem miejsca jako parametrem destination_place_id. Tworzenie i używanie adresów URL Map Google jest bezpłatne, więc nie musisz umieszczać w nich klucza interfejsu API.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Opcjonalnie możesz podać parametr zapytania origin w tym samym formacie adresu co miejsce docelowe. Jeśli go pominiesz, wskazówki dojazdu będą się zaczynać od bieżącej lokalizacji użytkownika, która może być inna niż miejsce, w którym korzystał on z aplikacji Lokalizator produktów.
Adresy URL Map
zawierają dodatkowe opcje parametrów zapytania, takie jak travelmode i dir_action=navigate, które umożliwiają uruchomienie wskazówek dojazdu z włączoną nawigacją.
Ten klikalny link, który rozszerza poprzedni przykładowy adres URL, ustawia origin jako londyński stadion piłkarski i używa parametru travelmode=transit, aby podać wskazówki dojazdu transportem publicznym do miejsca docelowego.
Aby wysłać SMS-a lub e-maila zawierającego ten adres URL, zalecamy obecnie użycie aplikacji innej firmy, np. twilio. Jeśli korzystasz z App Engine, możesz używać usług zewnętrznych 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 lokalizacji na interaktywnej mapie
Korzystanie z map dynamicznych
| Ten przykład korzysta z: Maps JavaScript API | Dostępne również na: Android | iOS |
Lokalizator jest ważnym elementem wrażeń użytkownika. Niektóre witryny mogą jednak nie mieć nawet prostej mapy, co zmusza użytkowników do opuszczenia witryny lub aplikacji w celu znalezienia pobliskiego miejsca. Oznacza to, że użytkownicy, którzy muszą przechodzić między stronami, aby uzyskać potrzebne informacje, nie mają optymalnych wrażeń. Zamiast tego możesz ulepszyć tę funkcję, osadzając i dostosowując mapy w swoich aplikacjach.
Dodanie do strony mapy dynamicznej, czyli mapy, po której użytkownicy mogą się poruszać, powiększać i pomniejszać oraz uzyskiwać szczegółowe informacje o różnych lokalizacjach i interesujących miejscach, wymaga tylko kilku wierszy kodu.
Najpierw musisz dodać do strony interfejs Maps JavaScript API.
W tym celu połącz ten skrypt ze stroną HTML, 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_productlocator_v1_a"></script>Adres URL odwołuje się do funkcji JavaScript 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 w przypadku konkretnego kraju, na który kierujesz reklamy. Ustawienie regionu zapewnia też, że działanie aplikacji używanych poza Stanami Zjednoczonymi będzie dostosowane do wybranego regionu. Pełną listę obsługiwanych języków i regionów znajdziesz w szczegółach dotyczących zasięgu Google Maps Platform. Więcej informacji o użyciu parametru region znajdziesz w tym artykule.
Następnie potrzebujesz elementu 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 funkcji skryptuinitMap określonej w adresie URL skryptu. W tym skrypcie, pokazanym w przykładzie poniżej, możesz ustawić lokalizację początkową, identyfikator mapy (wymagany w przypadku znaczników zaawansowanych i definiowania stylów map w Google Cloud), typ mapy oraz elementy sterujące dostępne na mapie dla użytkowników. Zwróć uwagę, że
getElementById() odwołuje się do poprzedniego identyfikatora „mapy” div.
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 interesuje Cię ustawienie początkowej lokalizacji, punktu środkowego lub granic oraz poziomu powiększenia (jak bardzo mapa jest powiększona w tej lokalizacji). Większość pozostałych elementów, takich jak dostrajanie elementów sterujących, jest opcjonalna, ponieważ to Ty określasz poziom interakcji z mapą.
Dostosowywanie mapy
Wygląd i szczegóły mapy możesz zmieniać na wiele sposobów. Możesz na przykład:
- Twórz własne niestandardowe znaczniki, które zastąpią domyślne pinezki na mapie.
- Zmień kolory elementów mapy, aby odzwierciedlały Twoją markę.
- Kontroluj, które ciekawe miejsca (atrakcje, restauracje, hotele itp.) i w jakim zagęszczeniu wyświetlasz, aby skupić uwagę użytkowników na swoich lokalizacjach, a jednocześnie wyróżnić punkty orientacyjne, które pomagają użytkownikom 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 obecnie otwarta), zastępując znacznik niestandardową grafiką, np. logo marki, lub tworząc niestandardowe znaczniki HTML i CSS. Okienka informacyjne lub wyskakujące okienka mogą zawierać dodatkowe informacje dla użytkowników, takie jak godziny otwarcia, numer telefonu lub zdjęcia.
Poniżej znajdziesz przykładową mapę z użyciem niestandardowych znaczników graficznych. (Zobacz kod źródłowy w temacie dotyczącym niestandardowych znaczników graficznych w interfejsie Maps JavaScript API).
Szczegółowe informacje znajdziesz w dokumentacji zaawansowanych znaczników dla JavaScriptu (w internecie), Android i iOS.
Nadaj styl mapie
Google Maps Platform umożliwia dostosowywanie stylu mapy w sposób, który pomaga użytkownikom znaleźć najbliższą lokalizację i jak najszybciej do niej dotrzeć, a Tobie wzmocnić markę. Możesz na przykład zmienić kolory mapy, aby pasowały do Twojej marki, a także zmniejszyć liczbę elementów rozpraszających uwagę na mapie, kontrolując punkty orientacyjne widoczne dla użytkowników. Google Maps Platform udostępnia też szereg szablonów map startowych, 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ć w konsoli Google Cloud na stronie Style mapy w swoim projekcie.
Rozwiń, aby zobaczyć animacje tworzenia stylu mapy i definiowania stylu w konsoli Cloud:
Style mapy branżowej
Animacja pokazująca wstępnie zdefiniowane style map dostosowane do konkretnych 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ę punktów orientacyjnych na mapie, dzięki czemu użytkownicy mogą skupić się na Twoich lokalizacjach oraz punktach orientacyjnych, które pomogą im jak najszybciej i najpewniej dotrzeć do najbliższej lokalizacji.
Sterowanie ciekawymi miejscami
Ta animacja ustawia kolor znacznika dla ciekawych miejsc i zwiększa ich gęstość 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 możesz odwoływać się do tego identyfikatora mapy w kodzie. Oznacza to, że możesz aktualizować styl mapy w czasie rzeczywistym bez refaktoryzacji aplikacji. Nowy wygląd automatycznie pojawi się w istniejącej aplikacji i będzie używany na różnych platformach. W podanych niżej przykładach pokazujemy, jak dodać identyfikator mapy do strony internetowej za pomocą interfejsu Maps JavaScript API.
Jeśli w adresie URL skryptu umieścisz co najmniej jeden znak map_ids, interfejs Maps JavaScript API automatycznie udostępni te style, co przyspieszy renderowanie mapy, gdy wywołasz 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_productlocator_v1_a">
</script>Poniższy kod wyświetla na stronie internetowej mapę ze stylem. (Nie pokazano elementu HTML <div id="map"></div>, w którym mapa będzie wyświetlana 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 wdrażaniu definiowania stylów map w Google Cloud w JavaScript (w internecie), Android i iOS.
Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu
W poprzedniej sekcji Wyświetlanie lokalizacji na interaktywnej mapie opisaliśmy używanie informacji o miejscu do przekazywania użytkownikom wielu informacji o Twoich lokalizacjach, takich jak godziny otwarcia, zdjęcia i opinie.
Warto poznać poziomy cen i kodów SKU różnych pól danych w Places API (nowość). Aby zarządzać kosztami, możesz połączyć informacje, które już masz o swoich lokalizacjach, z nowymi informacjami z Map Google, takimi jak tymczasowe zamknięcie, godziny otwarcia w święto oraz oceny, zdjęcia i opinie użytkowników. Jeśli masz już informacje kontaktowe swoich sklepów, nie musisz prosić o te pola w szczegółach miejsca. 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łniają lub zastępują informacje o miejscach. Codelab dotyczący lokalizatora pełnozakresowego zawiera przykład użycia GeoJSON z bazą danych do przechowywania i pobierania własnych szczegółów lokalizacji.