Przegląd
Platforma Google Maps Platform jest dostępna w wersji internetowej (JS, TS) oraz na urządzeniach z Androidem i iOS. Udostępnia też interfejsy API usług internetowych do uzyskiwania informacji o miejscach, wskazówkach dojazdu i odległościach. Przykłady w tym przewodniku są przeznaczone dla jednej platformy, ale podamy linki do dokumentacji na temat implementacji na innych platformach.
Gdy użytkownicy widzą Twoje produkty online, chcą znaleźć najlepszy i najwygodniejszy sposób realizacji zamówienia. Opisane w tym temacie podręcznik implementacji i wskazówki dotyczące dostosowywania lokalizatora produktów stanowią optymalne połączenie interfejsów API Google Maps Platform, które pozwala użytkownikom tworzyć świetne lokalizatory produktów.
Postępując zgodnie z tym przewodnikiem po implementacji, możesz wyświetlać klientom szczegółowe informacje, których potrzebują, aby znaleźć Twoje produkty, oraz podawać wskazówki dojazdu do sklepu z produktem (samochodem, rowerem, pieszo lub transportem publicznym).
Włączam interfejsy API
Aby wdrożyć lokalizator produktów, musisz włączyć w konsoli Google Cloud poniższe interfejsy API. Te hiperlinki przenoszą Cię do konsoli Google Cloud, gdzie możesz włączyć każdy interfejs API w wybranym projekcie:
Więcej informacji o konfigurowaniu znajdziesz w artykule o pierwszych krokach z Google Maps Platform.
Sekcje przewodnika po implementacji
Poniżej omawiamy implementacje i dostosowania, które zostaną omówione w tym temacie.
- Głównym etapem wdrażania jest ikona znacznika wyboru.
- Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie w celu ulepszenia rozwiązania.
| Łączenie 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ę pisania na bieżąco, aby zwiększyć wygodę użytkowników na wszystkich platformach i dokładność adresów przy minimalnej liczbie naciśnięć klawiszy. | |
| Identyfikuję najbliższe sklepy | Oblicz 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, transportem publicznym lub rowerem. | |
| Wyświetlanie informacji o sklepie | Wyświetlaj szczegółowe informacje o Twoich sklepach, aby użytkownicy mogli łatwiej do nich przechodzić. | |
| Wyznaczanie trasy | Korzystaj z danych o trasach dojazdu z miejsca docelowego do miejsca docelowego przy użyciu różnych form transportu, takich jak pieszy, samochód, rower czy transport publiczny. | |
| Wysyłanie trasy na komórkę | Oprócz wyświetlania wskazówek dojazdu na stronie internetowej możesz też wysłać je na telefon użytkownika, aby umożliwić nawigację za pomocą Map Google, gdziekolwiek jesteś. | |
| Wyświetlanie lokalizacji na interaktywnej mapie | Utwórz niestandardowe znaczniki mapy, dzięki którym Twoje lokalizacje będą się wyróżniać, i dostosuj mapę tak, aby pasowała do kolorów Twojej marki. Wyświetlaj (lub ukrywaj) określone ciekawe miejsca na mapie, aby ułatwić użytkownikom orientację, a także kontroluj zagęszczenie tych miejsc, aby zwiększyć porządek na mapie. | |
| Łączenie niestandardowych danych o lokalizacji ze szczegółami miejsca | Połącz własne, niestandardowe szczegóły lokalizacji ze szczegółami miejsca, aby udostępnić użytkownikom bogaty zestaw danych ułatwiających podejmowanie decyzji. |
Powiązanie lokalizacji sklepów z miejscami w Google Maps Platform
Uzyskiwanie identyfikatorów miejsc
| W tym przykładzie użyto: Place API | Dostępny także: JavaScript |
Być może masz bazę danych swoich sklepów zawierającą podstawowe informacje, takie jak nazwa, adres i numer telefonu. Możesz ją powiązać z miejscem w Google Maps Platform, aby określić miejsca, do których użytkownicy mogą odebrać produkty. Aby pobrać informacje o tym miejscu dostępne w Google Maps Platform, w tym współrzędne geograficzne i informacje pochodzące od użytkowników, znajdź identyfikator miejsca odpowiadający każdemu magazynowi w Twojej bazie danych.
Możesz wywołać
punkt końcowy usługi Places API w wyszukiwaniu miejsc interfejsu Places API i żądać tylko pola place_id.
Poniższy przykład pokazuje prośbę o identyfikator 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ć identyfikator miejsca w bazie danych wraz z pozostałymi danymi sklepu i używać go do efektywnego wysyłania próśb o informacje o sklepie. Poniżej znajdziesz instrukcje korzystania z identyfikatora miejsca do geokodowania, pobierania szczegółów miejsca i uzyskiwania wskazówek dojazdu do miejsca.
Geokodowanie lokalizacji
| W tym przykładzie użyto: Geocoding API | Dostępny także: JavaScript |
Jeśli Twoja baza danych sklepów zawiera adresy, ale nie współrzędne geograficzne, skorzystaj z interfejsu Geocoding API, aby uzyskać szerokość i długość geograficzną tego adresu, aby określić, które sklepy znajdują się najbliżej Twojego klienta. Możesz geokodować sklep po stronie serwera, zapisywać szerokości i długości geograficzne w bazie danych oraz odświeżać dane co 30 dni.
Oto przykład wykorzystania interfejsu Geocoding API w celu 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
Określanie lokalizacji użytkownika
| W tym przykładzie użyto: biblioteki autouzupełniania miejsc w interfejsie Maps JavaScript API | Dostępne też: Android | iOS |
Kluczowym elementem lokalizatora produktów jest określenie lokalizacji początkowej użytkownika. Możesz zaoferować użytkownikom dwie opcje określania lokalizacji początkowej: wpisanie źródła wyszukiwania lub przyznanie uprawnień dostępu do geolokalizacji w przeglądarce bądź komórkowej lokalizacji usług lokalizacyjnych.
Obsługa wpisów wpisanych za pomocą autouzupełniania
Dzisiejsi użytkownicy są przyzwyczajeni do funkcji autouzupełniania, która umożliwia pisanie z wyprzedzeniem w wersji Map Google dla klientów indywidualnych. Funkcję tę 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łnia pozostałe za pomocą widżetów. Możesz również udostępnić własne funkcje autouzupełniania za pomocą bibliotek Miejsc.
W poniższym przykładzie dodaj do witryny bibliotekę autouzupełniania miejsc, dodając parametr libraries=places do adresu URL skryptu interfejsu API JavaScript Map Google.
<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 do strony pole tekstowe, w którym użytkownik będzie mógł:
<input id="autocomplete" placeholder="Enter
starting address, city, or zip code" type="text"></input>Na koniec zainicjuj usługę autouzupełniania i połącz ją z nazwanym polem tekstowym. Ograniczenie prognoz autouzupełniania miejsc do typów geokodów powoduje skonfigurowanie pola do wprowadzania danych tak, aby akceptowało adresy, dzielnice, miasta i kody pocztowe. Dzięki temu użytkownicy mogą szczegółowo opisać swoje pochodzenie. Pamiętaj, aby zażądać pola geometry, aby odpowiedź zawierała szerokość i długość geograficzną miejsca wylotu. Tych współrzędnych na mapie możesz użyć, by wskazać relację między swoimi lokalizacjami a punktem początkowym.
// 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, gdy użytkownik wybierze adres, uruchamia się funkcja searchFromOrigin(). Na podstawie geometrii dopasowanego wyniku, czyli lokalizacji użytkownika, wyszukujemy najbliższe lokalizacje na podstawie tych współrzędnych jako źródło, które omówiono w sekcji Identyfikowanie 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 w przeglądarce
Jeśli chcesz prosić o geolokalizację przeglądarki HTML5 i ją obsługiwać, dowiedz się, jak włączyć okno Użyj mojej lokalizacji:
Identyfikowanie najbliższych sklepów
| W tym przykładzie użyto: usługi macierzy odległości, interfejsu Maps JavaScript API | Dostępny także: Odległość Matrix API |
Znając lokalizację użytkownika, możesz porównać ją z lokalizacją Twoich sklepów. Dzięki usłudze matrycy odległości interfejs Maps JavaScript API pomaga użytkownikom wybrać najdogodniejsze dla nich miejsce, uwzględniając przy tym czas jazdy lub odległość.
Standardowy sposób porządkowania listy lokalizacji polega na ich sortowaniu według odległości. Ta odległość jest często obliczana po prostu za pomocą linii prostej od użytkownika do danej lokalizacji, jednak może to być mylące. Linia prosta może przebiegać nad nieprzejezdną rzeką lub ruchliwymi drogami w czasie, gdy inne miejsce może być wygodniejsze. Jest to ważne, gdy wiele lokalizacji od siebie jest oddalone o kilka kilometrów.
Maps JavaScript API, czyli usługa macierzy odległości, korzysta z listy lokalizacji wylotu i docelowego, a potem zwraca nie tylko odległość, ale też czas między nimi. W przypadku użytkownika miejscem początkowym będzie lokalizacja, w której się on znajduje, lub punkt początkowy, a miejscami docelowymi są lokalizacje. Punkty początkowe i miejsca docelowe można określać jako pary współrzędnych lub adresy. Gdy wywołujesz usługę, usługa jest dopasowywana do adresów. Możesz użyć usługi matrycy odległości i Maps JavaScript API z dodatkowymi parametrami, aby wyświetlać wyniki na podstawie aktualnego lub przyszłego czasu jazdy.
W tym przykładzie wywołujemy usługę macierzy odległości i Map JavaScript API, określając jednocześnie źródło 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świetlić stan magazynowy produktu na podstawie bazy danych o asortymencie.
Wyświetlanie informacji o sklepie
| W tym przykładzie używane są: Biblioteka miejsc, Maps JavaScript API | Również dostępne: Pakiet SDK Miejsc na Androida | Pakiet SDK Miejsc na iOS | Places API |
Możesz udostępnić szczegółowe informacje o miejscu, takie jak dane kontaktowe, godziny otwarcia czy aktualny stan otwarcia, aby ułatwić klientom wybranie preferowanej lokalizacji lub sfinalizowanie zamówienia.
Po wywołaniu interfejsu Maps JavaScript API w celu pobrania szczegółów miejsca możesz przefiltrować i wyrenderować odpowiedź.
Aby poprosić o szczegóły dotyczące miejsca, potrzebny będzie identyfikator miejsca każdej z Twoich lokalizacji. Informacje o tym, jak pobrać identyfikator miejsca swojej lokalizacji, znajdziesz w sekcji Uzyskiwanie identyfikatorów miejsc.
Następujące żądanie informacji o miejscu zwraca adres, współrzędne, stronę internetową, numer telefonu, ocenę i godziny otwarcia dla identyfikatora miejsca 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);
}
}
Ulepszony lokalizator produktów
W zależności od potrzeb Twojej firmy lub potrzeb użytkowników możesz dodatkowo zwiększyć wygodę użytkowników.
Podawanie wskazówek nawigacji
| W tym przykładzie użyto: Usługa Maps JavaScript API Directions Service | Również dostępne: usługa internetowa Directions API do użytku na urządzeniach z Androidem i iOS – bezpośrednio z aplikacji lub zdalnie przez serwer proxy serwera. |
Dzięki wskazówkom dojazdu z witryny lub aplikacji użytkownicy nie muszą opuszczać jej w inny sposób, rozpraszając uwagę na innych stronach ani widząc konkurencję na mapie. Możesz nawet pokazać emisję dwutlenku węgla związaną z określonym środkiem transportu i wpływ konkretnej podróży, korzystając z posiadanego zbioru danych.
Usługa wyznaczania trasy zawiera również funkcje umożliwiające przetwarzanie wyników i ich łatwe wyświetlanie na mapie.
Poniżej znajduje się przykład wyświetlenia panelu wskazówek dojazdu. Więcej informacji o przykładzie znajdziesz w sekcji Wyświetlanie wskazówek tekstowych.
Wysyłam trasę na komórkę
Aby jeszcze bardziej ułatwić użytkownikom dotarcie do danej lokalizacji, możesz wysłać im link ze wskazówkami dojazdu lub SMS-em. Po jej kliknięciu na telefonie zostanie uruchomiona aplikacja Mapy Google (jeśli jest zainstalowana) lub strona maps.google.com otworzy się w przeglądarce urządzenia. Obie te rozwiązania dają użytkownikowi możliwość dotarcia do celu za pomocą szczegółowej nawigacji, w tym wskazówek głosowych.
Użyj
adresów URL Map, aby utworzyć URL wskazówek dojazdu (jak poniżej) z zakodowaną w adresem URL nazwą miejsca jako parametrem destination, a identyfikatorem miejsca – parametrem destination_place_id. Tworzenie i używanie adresów URL Map Google nie wiąże się z żadnymi opłatami, więc nie trzeba dodawać do 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 w miejscu docelowym. Jeśli jednak go pominiesz, wskazówki będą wyświetlane w bieżącej lokalizacji użytkownika, która może być inna niż ta, w której używał aplikacji Lokalizator produktów. Adresy URL w Mapach zapewniają dodatkowe opcje parametrów zapytania, np. travelmode i dir_action=navigate, które uruchamiają wskazówki dojazdu z włączoną nawigacją.
Ten klikalny link, który rozszerza powyższy przykładowy URL, ustawia origin jako stadion piłkarski Londynu i używa travelmode=transit, by wskazać trasę dojazdu transportem publicznym do tego 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świetlam Twoje lokalizacje na interaktywnej mapie
Korzystanie z map dynamicznych
| W tym przykładzie użyto: Map JavaScript API | Dostępne też: Android | iOS |
Lokalizator to ważny element obsługi użytkowników. Niektóre witryny mogą jednak nie mieć nawet prostej mapy, co zmusza użytkowników do opuszczenia danej witryny lub znalezienia pobliskiej lokalizacji w aplikacji. Oznacza to nieoptymalne wrażenia użytkowników, którzy muszą przechodzić między stronami w celu uzyskania potrzebnych informacji. Zamiast tego możesz wzbogacić tę funkcję, umieszczając i dostosowując mapy w swoich aplikacjach.
Dodanie do strony dynamicznej mapy, czyli mapy, którą użytkownicy mogą przesuwać, powiększać i pomniejszać, a także wyświetlać szczegółowe informacje o różnych lokalizacjach i ciekawych miejscach – można zrobić za pomocą kilku linijek kodu.
Najpierw musisz umieścić na stronie interfejs Maps JavaScript API. W tym celu należy dodać na stronie HTML link do tego skryptu.
<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 initMap JavaScriptu, która uruchamia się podczas wczytywania strony. W adresie URL możesz też określić język lub region mapy, aby mieć pewność, że jest on sformatowany w odpowiedni sposób dla kraju, na który kierujesz reklamy. Określenie regionu daje też pewność, że działanie aplikacji używanych poza Stanami Zjednoczonymi będzie miało związek z wybranym przez Ciebie regionem. Pełną listę obsługiwanych języków i regionów znajdziesz w informacjach o stanie Google Maps Platform oraz więcej informacji o używaniu parametrów region.
Następnie potrzebujesz kodu HTML div, aby umieścić swoją 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. Służy do tego funkcja skryptu initMap określona w adresie URL skryptu. W tym skrypcie, pokazanym w przykładzie poniżej, możesz ustawić lokalizację początkową, typ mapy oraz to, które elementy sterujące będą dostępne na mapie dla użytkowników. Zwróć uwagę, że właściwość getElementById() odwołuje się do powyższego identyfikatora div „mapa”.
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 sprawdza się ustawienie początkowej lokalizacji, punktu środkowego lub granicy i poziomu powiększenia (czyli stopnia powiększenia mapy). Większość innych elementów, takich jak dostrajanie elementów sterujących, jest opcjonalna przy określaniu poziomu 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 znaczniki, które zastąpią domyślne pinezki na mapie.
- Zmień kolory elementów mapy, aby odzwierciedlić swoją markę.
- Możesz kontrolować, które ciekawe miejsca (atrakcje, restauracje, noclegi itp.) mają się wyświetlać i w jakim zagęszczeniu. Pozwala to skupić uwagę użytkowników na wybranych lokalizacjach i wyróżniać punkty orientacyjne, które pomagają im dotrzeć do najbliższej lokalizacji.
Tworzenie niestandardowych znaczników mapy
Możesz dostosować znaczniki, zmieniając ich kolor domyślny (co może wskazywać, czy dana lokalizacja jest obecnie otwarta) lub zastępując znacznik obrazem niestandardowym, np. z logo Twojej marki. Okna informacyjne pozwalają wyświetlać użytkownikom dodatkowe informacje, np. godziny otwarcia, numer telefonu, a nawet zdjęcia. Możesz również tworzyć znaczniki rastrowe, wektorowe, przeciągane, a nawet animowane.
Poniżej znajduje się przykładowa mapa z niestandardowymi znacznikami. Kod źródłowy znajdziesz w temacie dotyczącym niestandardowych znaczników interfejsu Maps JavaScript API.
Szczegółowe informacje znajdziesz w dokumentacji znaczników w języku JavaScript (witryna), na Androidzie i iOS.
Określanie stylu mapy
Google Maps Platform pozwala tak dostosować mapę, by użytkownicy mogli znaleźć najbliższą lokalizację, jak najszybciej do niej dotrzeć, a także wzmocnić wizerunek Twojej marki. Możesz na przykład zmienić kolory mapy tak, aby pasowały do Twojej marki, oraz ograniczyć rozpraszanie uwagi na mapie, kontrolując ciekawe miejsca widoczne dla użytkowników. Google Maps Platform udostępnia również wiele szablonów początkowych map, z których niektóre są zoptymalizowane pod kątem różnych branż, np. podróży, logistyki, nieruchomości i handlu detalicznego.
Style mapy możesz tworzyć i modyfikować na stronie Style mapy w swoim projekcie w konsoli Google Cloud.
Rozwiń, aby zobaczyć animacje tworzenia i określania stylu mapy w konsoli Cloud:
Style map branżowych
Ta animacja pokazuje wstępnie zdefiniowane style mapy stosowane w danej branży, których możesz użyć. Te style są optymalnym punktem wyjścia dla każdego typu branży. Na przykład styl mapy handlu detalicznego zmniejsza liczbę ciekawych miejsc na mapie, dzięki czemu użytkownicy mogą skupić się na lokalizacjach i punktach orientacyjnych, które pomagają im dotrzeć do najbliższej lokalizacji tak szybko i bezpiecznie, jak to tylko możliwe.
Ustawienia ciekawych miejsc
Ta animacja ustawia kolor znacznika ciekawych miejsc i zwiększa zagęszczenie ciekawych miejsc w stylu mapy. Im większa gęstość, tym więcej znaczników ważnych miejsc na mapie jest widocznych.
Każdy styl mapy ma własny identyfikator. Po opublikowaniu stylu w konsoli Cloud odwołujesz 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 przykładach poniżej pokazujemy, jak dodać identyfikator mapy do strony internetowej za pomocą interfejsu Maps JavaScript API.
Dzięki dodaniu do adresu URL skryptu co najmniej 1 elementu map_ids interfejs Maps JavaScript API automatycznie udostępnia te style w celu szybszego renderowania mapy, gdy wywołujesz te style w kodzie.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>
Poniższy kod wyświetla na stronie internetowej mapę z wybranym stylem. (Niewidoczny jest element HTML <div id="map"></div> w miejscu, 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 wprowadzaniu stylów map opartych na chmurze w JavaScript (internet), na Androidzie i iOS.
Łączenie niestandardowych danych o lokalizacji ze szczegółami miejsca
W poprzedniej sekcji Wyświetlanie lokalizacji na interaktywnej mapie omówiliśmy użycie informacji o miejscu, które zapewnia użytkownikom rozbudowane informacje o lokalizacjach, np. godziny otwarcia, zdjęcia i opinie.
Warto znać koszty związane z różnymi polami danych w szczegółach miejsca. Są one podzielone na kategorie: Dane podstawowe, Dane kontaktowe i Dane o atmosferze. Aby zarządzać kosztami, jedną ze strategii jest połączenie informacji o lokalizacjach, które już masz, z aktualnymi (zwykle podstawowymi i kontaktowymi) informacjami z Map Google, takimi jak tymczasowe zamknięcie, godziny otwarcia, oceny użytkowników, zdjęcia i opinie. Jeśli masz już dane kontaktowe swoich sklepów, nie musisz prosić o te pola ze szczegółowych informacji o miejscu i możesz ograniczyć żądanie do pobierania tylko pól podstawowych lub danych atmosfery w zależności od tego, co chcesz wyświetlać.
Możesz mieć własne dane o miejscach, które możesz uzupełnić lub wykorzystać zamiast informacji o miejscu. W programie dotyczącym lokalizatora pełnego stosu znajdziesz przykład zastosowania GeoJSON z bazą danych do przechowywania i pobierania szczegółów lokalizacji.