Omówienie
Google Maps Platform jest dostępna w wersji internetowej (JS, TS), na Androida i iOS. Oferuje też interfejsy API usług internetowych do uzyskiwania informacji o miejscach, kierunkach i odległościach. Przykłady w tym przewodniku zostały przygotowane na potrzeby jednej platformy, ale w dokumentacji znajdziesz linki do implementacji na innych platformach.
Gdy użytkownicy zobaczą Twoje produkty online, chcą znaleźć najlepszy i najwygodniejszy sposób na złożenie zamówienia. W tym artykule znajdziesz wskazówki dotyczące tworzenia interfejsów API Google Maps Platform, które pozwolą Ci stworzyć optymalne rozwiązanie do wyszukiwania produktów.
Dzięki temu przewodnikowi możesz pomóc klientom w uzyskaniu szczegółowych informacji, które pomogą im znaleźć Twoje produkty, oraz podać im drogę do sklepu, w którym są one dostępne, niezależnie od tego, czy jadą samochodem, rowerem, idą pieszo czy korzystają z transportu publicznego.
Włączam interfejsy API
Aby wdrożyć wyszukiwarkę produktów, musisz włączyć te interfejsy API w Google Cloud Console. Te hiperlinki przekierowują Cię do konsoli Google Cloud, aby włączyć poszczególne interfejsy API w wybranym projekcie:
Więcej informacji o konfigurowaniu znajdziesz w artykule Pierwsze kroki z Google Maps Platform.
Sekcje przewodnika po implementacji
Poniżej omówimy implementacje i dostosowywanie, które są związane z tym tematem.
- Ikona wyboru to kluczowy krok implementacji.
- Ikona gwiazdy jest opcjonalną, ale zalecaną funkcją dostosowywania, która pozwala ulepszać rozwiązanie.
| Powiązanie lokalizacji sklepu z miejscami w Google Maps Platform | Dopasuj lokalizację sklepu do miejsca w Google Maps Platform. | |
| Identyfikowanie lokalizacji użytkownika | Dodaj funkcję pisania na klawiaturze, aby zwiększyć wygodę użytkowników na wszystkich platformach i poprawić dokładność adresów przy minimalnej liczbie naciśnięć klawiszy. | |
| Wyznaczanie najbliższych sklepów | Obliczanie odległości i czasu podróży dla wielu miejsc wyjazdu i docelowych, opcjonalnie z uwzględnieniem różnych środków transportu, takich jak pieszo, samochód, transport publiczny czy rower. | |
| Wyświetlanie informacji o sklepie | Wyświetlaj w sklepach obszerne informacje, aby użytkownicy mogli łatwiej je znaleźć. | |
| Przekazywanie wskazówek dojazdu | Pobieranie danych wskazówek dojazdu z miejsca wylotu do miejsca docelowego z użyciem różnych środków transportu, takich jak pieszo, samochodem, rowerem lub transportem publicznym. | |
| Wysyłanie wskazówek dojazdu na urządzenie mobilne | Oprócz wyświetlania wskazówek na stronie możesz też wysyłać je na telefon użytkownika, aby mógł nawigować za pomocą Map Google. | |
| Wyświetlanie lokalizacji na interaktywnej mapie | Utwórz niestandardowe znaczniki mapy, aby wyróżnić swoje lokalizacje, i spersonalizuj mapę, aby pasowała do kolorów Twojej marki. Wyświetlaj (lub ukryj) na mapie konkretne ważne miejsca, aby ułatwić użytkownikom nawigację, oraz kontroluj gęstość ważnych miejsc, aby uniknąć zaśmiecania mapy. | |
| Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu | Połącz własne niestandardowe szczegóły lokalizacji z szczegółami miejsca, aby udostępnić użytkownikom bogaty zestaw danych, który pomoże im w podejmowaniu decyzji. |
Powiązanie lokalizacji sklepów z miejscami w Google Maps Platform
Pobieranie identyfikatorów miejsc
| Ten przykład korzysta z: interfejsu Places API | Dostępne są też: JavaScript |
Możesz mieć bazę danych ze sklepami zawierającą podstawowe informacje, takie jak nazwa lokalizacji, adres i numer telefonu, i chcesz powiązać ją z miejscem w Google Maps Platform jako zestawem miejsc docelowych, w których użytkownicy mogą odbierać produkty. Aby pobrać informacje, które Google Maps Platform ma o danym miejscu, w tym współrzędne geograficzne i informacje przesłane przez użytkowników, znajdź identyfikator miejsca odpowiadający każdemu sklepowi w Twojej bazie danych.
Możesz wywołać
punkt końcowy Znajdź miejsce w interfejsie Places API w sekcji wyszukiwania miejsc i wysłać tylko pole place_id.
Poniżej przedstawiamy przykład żądania identyfikatora miejsca dla biura 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_productlocator_v1_a
Możesz zapisać ten identyfikator miejsca w swojej bazie danych wraz z pozostałymi danymi o sklepie i wykorzystać go do efektywnego przesyłania zapytania o informacje o sklepie. Poniżej znajdziesz instrukcje korzystania z identyfikatora miejsca do geokodowania, pobierania szczegółów miejsca i wysyłania wskazówek dojazdu do tego miejsca.
Geokodowanie lokalizacji
| Ten przykład korzysta z: Geocoding API | Dostępne są też: JavaScript |
Jeśli Twoja baza danych sklepów zawiera adresy ulicy, ale nie ma współrzędnych geograficznych, użyj interfejsu Geocoding API, aby uzyskać szerokość i długość geograficzną adresu w celu obliczenia, które sklepy są najbliżej klienta. Możesz zgeokodować sklep po stronie serwera, zapisać szerokości i długości geograficzne w bazie danych oraz odświeżyć dane co najmniej co 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_productlocator_v1_a
Identyfikowanie lokalizacji użytkownika
| Ten przykład korzysta z: biblioteki Autouzupełniania miejsc w Maps JavaScript API | Dostępne też na: Android | iOS |
Kluczowym elementem w lokalizatorze produktów jest określenie początkowej lokalizacji użytkownika. Możesz zaoferować użytkownikowi 2 opcje określania lokalizacji początkowej: wpisanie miejsca rozpoczęcia wyszukiwania lub udzielenie uprawnień do geolokalizacji przeglądarki internetowej lub usług lokalizacyjnych na urządzeniu mobilnym.
Obsługa wpisanych wpisów za pomocą autouzupełniania
Użytkownicy są przyzwyczajeni do funkcji autouzupełniania w wersji Map Google dla konsumentów. Tę funkcję można zintegrować z dowolną aplikacją korzystającą z bibliotek Miejsc w Google Maps Platform na urządzeniach mobilnych i w internecie. Gdy użytkownik wpisze adres, autouzupełnianie uzupełni resztę za pomocą widżetów. Możesz też zastosować własną funkcję autouzupełniania, korzystając bezpośrednio z bibliotek Miejsc.
W tym przykładzie dodaj do witryny bibliotekę Autouzupełniania miejsc, dodając parametr libraries=places do adresu URL skryptu Maps JavaScript API.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>Następnie dodaj na stronie pole tekstowe na dane wprowadzane przez użytkownika:
<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 prognozowanych wyników autouzupełniania Miejsca do typów kodów pocztowych powoduje, że pole wprowadzania danych akceptuje adresy ulic, nazwy dzielnic, miast i kodów pocztowych, dzięki czemu użytkownicy mogą podać dowolny poziom szczegółowości, aby opisać swoje miejsce pochodzenia. Pamiętaj, aby poprosić o pole geometry, aby odpowiedź zawierała współrzędne geograficzne miejsca pochodzenia użytkownika. Użyjesz tych współrzędnych mapy, aby wskazać związek lokalizacji z miejscem 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", searchFromOrigin);
}
W tym przykładzie po wybraniu adresu przez użytkownika rozpoczyna się działanie funkcji searchFromOrigin(). Funkcja ta pobiera geometrię dopasowanego wyniku, czyli lokalizację użytkownika, a następnie wyszukuje najbliższe lokalizacje na podstawie tych współrzędnych jako punktu początkowego (omówionego w sekcji Identyfikowanie najbliższych sklepów).
Rozwiń ten element, aby obejrzeć samouczki wideo dotyczące dodawania do aplikacji autouzupełniania Miejsca:
Witryna
Aplikacje na Androida
Aplikacje na iOS
Korzystanie z lokalizacji geograficznej przeglądarki
Aby wysłać żądanie geolokalizacji w przeglądarce HTML5 i je obsłużyć, włącz okno Użyj mojej lokalizacji:
Wybieranie najbliższych sklepów
| Ten przykład korzysta z: Usługa macierzy odległości, Maps JavaScript API | Dostępne są też te opcje: Distance Matrix API |
Gdy poznasz lokalizację użytkownika, możesz ją porównać z lokalizacją Twoich sklepów. Dzięki temu użytkownicy mogą wybrać lokalizację, która jest dla nich najwygodniejsza pod względem czasu lub odległości.
Standardowy sposób porządkowania listy lokalizacji polega na ich sortowaniu według odległości. Często odległość ta jest obliczana na podstawie linii prostej od użytkownika do lokalizacji, ale może to być mylące. Prosta linia może przebiegać przez niemożliwą do pokonania rzekę lub ruchliwe drogi w czasie, gdy inna lokalizacja może być wygodniejsza. Jest to ważne, gdy masz kilka lokalizacji w odległości kilku kilometrów od siebie.
Usługa macierzy odległości Maps JavaScript API działa na podstawie listy miejsc docelowych i początkowych, a także zwraca nie tylko odległość, ale też czas podróży. W przypadku użytkownika punkt początkowy to miejsce, w którym się znajduje, lub wybrany przez niego punkt początkowy, a punkty docelowe to lokalizacje. Początki i miejsca docelowe można określić jako pary współrzędnych lub adresy. Gdy wywołasz usługę, usługa dopasowuje adresy. Możesz użyć usługi Distance Matrix Service, Maps JavaScript API z dodatkowymi parametrami, aby wyświetlić wyniki na podstawie bieżących lub przyszłych czasów przejazdu.
W tym przykładzie wywołujemy usługę DistanceMatrixService, Maps JavaScript API, podając punkt początkowy użytkownika i 25 lokalizacji sklepów.
function getDistances(place) {
let distanceMatrixService = new google.maps.DistanceMatrixService();
const origins = [place];
return new Promise((resolve, reject) => {
const callback = (response, status) => {
if (status === google.maps.DistanceMatrixStatus.OK && response) {
resolve(response);
} else {
reject(status);
}
};
distanceMatrixService.getDistanceMatrix(
{
origins,
destinations: stores.slice(0, 25).map((store) => store.location),
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
},
callback
);
});
}
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((response) => {
for (let i = 0; i < response.rows[0].elements.length; i++) {
stores[i].address = response.destinationAddresses[i];
stores[i].travelDistance = response.rows[0].elements[i].distance.value;
stores[i].travelDistanceText =
response.rows[0].elements[i].distance.text;
stores[i].travelDuration = response.rows[0].elements[i].duration.value;
stores[i].travelDurationText =
response.rows[0].elements[i].duration.text;
}
})
.finally(() => {
renderCards(stores);
autocompleteInput.disabled = false;
isUpdateInProgress = false;
});
}
W przypadku każdej pobliskiej lokalizacji 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, Maps JavaScript API | Dostępne są też: Pakiet SDK Miejsc na Androida | Pakiet SDK Miejsc na iOS | API Miejsc |
Możesz udostępniać szczegółowe informacje o miejscu, takie jak dane kontaktowe, godziny otwarcia i obecny stan otwarcia, aby ułatwić klientom wybór preferowanego miejsca lub sfinalizowanie zamówienia.
Po wywołaniu interfejsu Maps JavaScript API w celu uzyskania szczegółów miejsca możesz odfiltrować i wyrenderować odpowiedź.
Aby poprosić o szczegóły miejsca, musisz podać identyfikator każdej lokalizacji. Aby pobrać identyfikator miejsca, w którym się znajdujesz, zapoznaj się z artykułem Pobieranie identyfikatorów miejsc.
Poniższe żądanie szczegółów miejsca zwraca adres, współrzędne, stronę internetową, numer telefonu, ocenę i godziny otwarcia miejsca o identyfikatorze Google London:
var request = {
placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
}
Udoskonalanie lokalizatora produktów
W zależności od potrzeb Twojej firmy lub użytkowników możesz jeszcze bardziej ulepszyć wrażenia użytkowników.
wskazówki nawigacyjne,
| Ten przykład korzysta z: Maps JavaScript API Usługa wyznaczania trasy | Dostępne są też: Directions API usługa internetowa do użycia na Androidzie i iOS, bezpośrednio z aplikacji lub zdalnie przez serwer proxy |
Gdy wyświetlasz użytkownikom wskazówki z witryny lub aplikacji, nie muszą oni opuszczać Twojej witryny ani rozpraszać się innymi stronami ani widokiem konkurencji na mapie. Możesz nawet wyświetlić emisję dwutlenku węgla związaną z konkretnym środkiem transportu i wpływ danej podróży, korzystając z posiadanego zbioru danych o emisji dwutlenku węgla.
Usługa Directions Service zawiera też funkcje, które umożliwiają przetwarzanie wyników i ich łatwe wyświetlanie na mapie.
Poniżej znajduje się przykład wyświetlania panelu wskazówek. Więcej informacji o tym pliku znajdziesz w artykule Wyświetlanie wskazówek tekstowych.
Wysyłanie wskazówek dojazdu na telefon
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 użytkownik kliknie ten link, na jego telefonie uruchomi się aplikacja Mapy Google (jeśli jest zainstalowana) lub na urządzeniu załaduje się strona maps.google.com. W obu przypadkach użytkownik ma możliwość korzystania z nawigacji krok po kroku, w tym z wskazówek głosowych, aby dotrzeć do celu.
Użyj
adresów URL Map, aby utworzyć adres URL wskazówek podobny do tego, 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ć 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, używając tego samego formatu adresu co docelowa usługa. Jeśli jednak go pominiesz, trasa będzie się zaczynać w bieżącej lokalizacji użytkownika, która może być inna niż lokalizacja, w której użytkownik korzystał z aplikacji Lokalizator produktów. Adresy URL Map zawierają dodatkowe opcje parametrów zapytań, takie jak travelmode i dir_action=navigate, które umożliwiają wyświetlenie trasy z włączoną nawigacją.
Ten klikalny link, który rozszerza przykładowy adres URL podany powyżej, ustawia origin jako londyński stadion piłkarski 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, takiej jak twilio. Jeśli korzystasz z App Engine, możesz wysyłać SMS-y lub e-maile za pomocą usług firm zewnętrznych. 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 też: Android | iOS |
Lokalizator to ważny element wrażeń użytkownika. Niektóre strony mogą jednak nie mieć nawet prostej mapy, co wymaga od użytkowników opuszczenia witryny lub aplikacji, aby znaleźć pobliską lokalizację. Oznacza to, że użytkownicy muszą przełączać się między stronami, aby uzyskać potrzebne informacje. Zamiast tego możesz wzbogacić to doświadczenie, umieszczając mapy w swoich aplikacjach i spersonalizowanie ich.
Dodanie do strony mapy dynamicznej, czyli mapy, którą użytkownicy mogą przesuwać, powiększać i pomniejszać oraz na której mogą uzyskać szczegółowe informacje o różnych lokalizacjach i miejscach docelowych, można zrobić za pomocą kilku linii kodu.
Najpierw musisz uwzględnić na stronie interfejs Maps JavaScript API. Aby to zrobić, połącz ten skrypt na stronie HTML.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>Adres URL odwołuje się do funkcji JavaScript initMap, która jest wykonywana podczas wczytywania strony. W adresie URL możesz też zdefiniować język lub region mapy, aby mieć pewność, że jest ona prawidłowo sformatowana dla wybranego kraju. Ustawienie regionu zapewnia też, że działanie aplikacji używanych poza Stanami Zjednoczonymi będzie zbliżone do tego, jakie jest w ustawionym regionie. Aby zobaczyć pełną listę obsługiwanych języków i regionów, a także dowiedzieć się więcej o regionużyciu parametrów, zapoznaj się z szczegółami dotyczącymi zasięgu Google Maps Platform.
Następnie musisz użyć 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 skonfigurowanie podstawowych funkcji mapy. Jest to realizowane w ramach funkcji skryptuinitMap określonej w adresie URL skryptu. W tym skrypcie, który możesz zobaczyć w przykładzie poniżej, możesz ustawić początkową lokalizację, 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 podanego powyżej.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
zoomControl: false
});
}
W przypadku lokalizatora zwykle interesuje nas ustawienie początkowej lokalizacji, punktu środkowego lub granic oraz poziomu powiększenia (ile powiększyć mapę w danej lokalizacji). Większość pozostałych elementów, takich jak dostosowanie ustawień, jest opcjonalna, ponieważ to Ty decydujesz o poziomie interakcji z mapą.
Dostosowywanie mapy
Wygląd i szczegóły mapy możesz zmieniać na kilka sposobów. Możesz na przykład:
- Utwórz własne znaczniki niestandardowe, aby zastąpić domyślne pinezki mapy.
- Zmieniaj kolory elementów mapy, aby pasowały do Twojej marki.
- Możesz kontrolować, które punkty zainteresowania (atrakcje, restauracje, obiekty noclegowe itp.) wyświetlasz oraz z jaką gęstością, co pozwala Ci skupić uwagę użytkowników na Twoich lokalizacjach, a zarazem wyróżniać punkty orientacyjne, które pomagają im dotrzeć do najbliższej lokalizacji.
Tworzenie niestandardowych znaczników mapy
Możesz je dostosowywać, zmieniając domyślny kolor (co może wskazywać, czy lokalizacja jest obecnie otwarta) lub zastępując znacznik niestandardowym obrazem, np. logo swojej marki. Okna informacyjne, czyli okna wyskakujące, mogą zawierać dodatkowe informacje dla użytkowników, takie jak godziny otwarcia, numer telefonu, a nawet zdjęcia. Możesz też tworzyć niestandardowe znaczniki rastrowe, wektorowe, przeciągane, a nawet animowane.
Poniżej znajduje się przykładowa mapa, która korzysta ze znaczników niestandardowych. (zobacz kod źródłowy w temacie markerów niestandardowych w Maps JavaScript API).
Szczegółowe informacje znajdziesz w dokumentacji dotyczącej znaczników w przypadku JavaScriptu (internet), Android i iOS.
Nadawanie mapie stylu
Google Maps Platform umożliwia stylizowanie mapy w sposób, który ułatwia użytkownikom znalezienie najbliższej lokalizacji, dotarcie do niej najszybciej jak to możliwe, a także wzmacnia Twoją markę. Możesz na przykład zmienić kolory mapy, aby pasowały do Twojego brandingu, a także zmniejszyć ilość elementów rozpraszających uwagę na mapie, kontrolując punkty zainteresowania widoczne dla użytkowników. Google Maps Platform udostępnia też kilkanaście szablonów map, z których część jest zoptymalizowana pod kątem różnych branż, takich jak turystyka, logistyka, nieruchomości czy sprzedaż detaliczna.
Style map możesz tworzyć i modyfikować na stronie Style map w konsoli Google Cloud w ramach projektu.
Rozwiń, aby zobaczyć animacje tworzenia i stylizacji stylu mapy w konsoli Cloud:
Style mapy zoptymalizowane pod kątem branży
Animacja pokazująca wstępnie zdefiniowane style mapy dostosowane do potrzeb danej branży, których możesz używać. Te style stanowią optymalny punkt wyjścia w przypadku każdego rodzaju branży. Na przykład styl mapy dla firm zajmujących się sprzedażą detaliczną zmniejsza liczbę punktów orientacyjnych na mapie, dzięki czemu użytkownicy mogą skupić się na Twoich lokalizacjach i punktach orientacyjnych, aby jak najszybciej i najpewniej dotrzeć do najbliższej lokalizacji.
Element sterujący Ciekawe miejsca
Ta animacja ustawia kolor znacznika dla punktów zainteresowania i zwiększa gęstość POI w stylu mapy. Im większa gęstość, tym więcej znaczników ważnych miejsc wyświetla się na mapie.
Każdy styl mapy ma własny identyfikator. Po opublikowaniu stylu w Cloud Console możesz odwołać 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 będzie automatycznie widoczny w dotychczasowej aplikacji i będzie używany na wszystkich platformach. Poniższe przykłady pokazują, jak za pomocą interfejsu Maps JavaScript API dodać identyfikator mapy do strony internetowej.
Jeśli w adresie URL skryptu umieścisz co najmniej 1 wartość map_ids, interfejs Maps JavaScript API automatycznie udostępni te style, aby przyspieszyć renderowanie mapy, gdy wywołasz te style w kodze.
<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 mapę ze stylami na stronie internetowej. (Nie pokazano elementu HTML <div id="map"></div>, w którym mapa będzie widoczna 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 włączaniu stylów map opartych na chmurze w JavaScript (w internecie), na Android i na iOS.
Łączenie niestandardowych danych o lokalizacji ze szczegółami miejsca
W poprzedniej sekcji Wyświetlanie lokalizacji na interaktywnej mapie omawialiśmy korzystanie z szczegółowych informacji o miejscach, aby zapewnić użytkownikom bogate informacje o Twoich lokalizacjach, takie jak godziny otwarcia, zdjęcia i opinie.
Warto poznać koszt różnych pól danych w szczegółach miejsca, które są podzielone na kategorie: podstawowe, dane kontaktowe i dane o atmosferze. Aby zarządzać kosztami, możesz połączyć informacje, które już masz o swoich lokalizacjach, ze świeżymi informacjami (zwykle podstawowymi i danymi kontaktowymi) z Map Google, takimi jak tymczasowe zamknięcie, godziny otwarcia w okresie świątecznym oraz oceny, zdjęcia i opinie użytkowników. Jeśli masz już informacje kontaktowe dotyczące swoich sklepów, nie musisz wysyłać żądania dotyczącego tych pól w ramach szczegółów miejsca. Możesz ograniczyć żądanie do pobierania tylko pól danych podstawowych lub danych dotyczących atmosfery, w zależności od tego, co chcesz wyświetlać.
Możesz mieć własne dane o miejscach, które uzupełniają informacje z sekcji Szczegóły miejsca lub mogą być używane zamiast nich. Codelab dla pełnego pakietu lokalizatora zawiera przykład użycia GeoJSON z bazą danych do przechowywania i pobierania własnych danych o lokalizacji.