Omówienie
Google Maps Platform można używać w przeglądarkach (JS, TS), na Androidzie i iOS, a także interfejsy API usług internetowych, które pozwalają uzyskać informacje o miejscach, i odległości. Przykłady w tym przewodniku dotyczą jednej platformy, podane są linki do dokumentacji na potrzeby implementacji na innych platformach.
Gdy użytkownicy widzą Twoje produkty w internecie, chcą znaleźć to, co najlepsze i jak najwięcej i wygodny sposób na odbiór zamówienia. Przewodnik po implementacji Lokalizatora produktów i dostosowania, które podajemy w tym temacie, zalecamy optymalne połączenie interfejsów API Google Maps Platform do tworzenia usług na temat wygody użytkowników lokalizatora.
Postępując zgodnie z tym przewodnikiem po implementacji, klienci zobaczą szczegółowe informacji potrzebnych im, aby znaleźć Twoje produkty, i przekazać im wskazówki dojazdu sklepu, w którym znajduje się jego produkt. Niezależnie od tego, czy jedziesz samochodem, rowerem, idziesz na piechotę czy transportem publicznym.
Włączam interfejsy API
Aby wdrożyć Lokalizator produktów, musisz włączyć w Konsola Google Cloud. Te hiperlinki przekierują Cię do konsoli Google Cloud aby włączyć poszczególne interfejsy API w wybranym projekcie:
- Maps JavaScript API
- Interfejs Places API
- Geocoding API
- Interfejs DISTANCE Matrix API
- Directions API,
Więcej informacji na ten temat znajdziesz w sekcji Pobieranie zaczęło korzystać z Google Maps Platform.
Sekcje z przewodnikiem po implementacji
Poniżej omawiamy implementacje i opcje dostosowywania, które omówimy w tym temacie.
- Podstawowym krokiem w implementacji jest ikona znacznika wyboru.
- Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie, ulepszać rozwiązanie.
| Powiązanie lokalizacji sklepów z miejscami w Google Maps Platform | Dopasuj lokalizację sklepu do miejsca w Google Maps Platform. | |
| Ustalanie lokalizacji użytkownika | Dodaj funkcję pisania w miarę postępów, która poprawi wygodę użytkowników na wszystkich i popraw dokładność adresów przy użyciu minimalnej liczby naciśnięć klawiszy. | |
| Identyfikowanie najbliższych sklepów | Oblicz odległość i czas podróży dla wielu punktów początkowych oraz miejsca docelowe, opcjonalnie określając różne środki transportu, takie jak pieszo, samochodem, transportem publicznym lub rowerem. | |
| Wyświetlanie informacji o sklepie | Wyświetlaj bogate w dane informacje o swoich sklepach, aby użytkownicy mogli łatwo przejść do ich dane. | |
| Podawanie wskazówek dojazdu | Wyznacz trasę dojazdu z punktu początkowego do miejsca docelowego za pomocą różnych form: transportu publicznego, takiego jak spacer, jazda samochodem, jazda na rowerze i transport publiczny. | |
| Wysyłanie trasy na komórkę | Oprócz wyświetlania wskazówek na stronie internetowej możesz też wysłać wskazówki dojazdu do telefonu użytkownika na potrzeby nawigacji w Mapach Google w podróży. | |
| Wyświetlanie lokalizacji na interaktywnej mapie | Twórz niestandardowe znaczniki mapy, aby wyróżnić swoje lokalizacje i nadać im styl mapę, aby pasowała do kolorów Twojej marki. Wyświetlanie (lub ukrywanie) konkretnych punktów ważne miejsca na mapie, aby ułatwić użytkownikom oraz kontrolować gęstość ciekawych miejsc, aby zachować bałagan na mapach. | |
| Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu | Połącz własne niestandardowe informacje o lokalizacji ze szczegółami miejsca, aby podać zapewnienie użytkownikom szerokiego zbioru danych do podejmowania decyzji. |
Powiązanie lokalizacji sklepów z miejscami w Google Maps Platform
Pobieram identyfikatory miejsc
| W tym przykładzie wykorzystano: Places API | Dostępne też: JavaScript |
Być może masz bazę danych swoich sklepów z podstawowymi informacjami, takimi jak nazwa
lokalizacji, adresu i numeru telefonu oraz chcesz powiązać
z miejscem w Google Maps Platform jako zestawem docelowych miejsc docelowych
użytkownicy mogą odebrać produkty. Aby pobrać informacje
dotyczące tego miejsca przez Google Maps Platform, w tym
i informacje przesłane przez użytkowników – znajdź identyfikator miejsca odpowiadający każdemu sklepowi w Twojej bazie danych.
Możesz zadzwonić do
znaleźć punkt końcowy Place w interfejsie Places API Place Search oraz
żądania tylko pola place_id.
Poniżej znajduje się przykład żądania identyfikatora miejsca dla Google Londyn biuro:
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 tego miejsca w bazie danych z pozostałymi danymi sklepu i wykorzystaj je poprosić o informacje o sklepie. Poniżej przedstawiono instrukcje korzystania z do geokodowania, pobrania informacji o miejscu i uzyskania wskazówek dojazdu do miejsce.
Geokodowanie lokalizacji
| W tym przykładzie wykorzystano: Geocoding API | Dostępne też: JavaScript |
Jeśli Twoja baza danych sklepów zawiera adresy, ale nie współrzędne geograficzne, użyć interfejsu Geocoding API w celu uzyskania szerokości i długości geograficznej tego aby ustalić, które sklepy znajdują się najbliżej Twojego klienta. Możesz geokodować sklep po stronie serwera i zapisać szerokości geograficzne. i długości geograficznej w bazie danych, odśwież co najmniej co 30 dni.
Oto przykład użycia interfejsu Geocoding API do uzyskania szerokość i długość geograficzną identyfikatora miejsca zwróconego w przypadku Google London biuro:
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
| W tym przykładzie zastosowano: Biblioteka autouzupełniania Miejsc w interfejsie Maps JavaScript API | Dostępne też: Android | iOS |
Kluczowym komponentem Lokalizatora produktów jest identyfikowanie lokalizacji. Możesz udostępnić użytkownikowi 2 opcje określania początku, lokalizacja: wpisanie miejsca, w którym zostało przeprowadzone wyszukiwanie, lub przyznanie uprawnień do internetu geolokalizacji w przeglądarce czy usług lokalizacji na urządzeniach mobilnych.
Obsługa wpisywanych wpisów przy użyciu autouzupełniania
Dzisiejsi użytkownicy są przyzwyczajeni do funkcji autouzupełniania na do wersji Map Google dla klientów indywidualnych. Funkcję tę można zintegrować z dowolnymi aplikacji korzystającej z bibliotek Miejsc Google Maps Platform na urządzeniach mobilnych i sieci. Gdy użytkownik wpisze adres, autouzupełnianie wypełnia resztę za pomocą widżetów. Możesz też użyć własnego autouzupełniania za pomocą bibliotek Miejsc.
W przykładzie poniżej dodaj bibliotekę autouzupełniania miejsca do swojej witryny, wykonując następujące kroki:
dodaję parametr libraries=places do
Adres URL skryptu interfejsu 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 do wprowadzania danych przez użytkowników:
<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
nazwane pole tekstowe. ograniczenie prognoz autouzupełniania miejsc do typów geokodów,
konfiguruje pole do wprowadzania danych, aby akceptować adresy, dzielnice, miasta
i kody pocztowe, tak aby użytkownicy mogli wpisać dowolny poziom szczegółowości
pochodzeniu danych. Pamiętaj, aby zażądać pola geometry, aby odpowiedź
zawiera szerokość i długość geograficzną miejsca początkowego użytkownika. Będziesz używać tych map
współrzędne, by wskazać relacje między Twoimi lokalizacjami
do punktu początkowego.
// 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(). Przyjmuje to geometrię
pasujący wynik to lokalizacja użytkownika, a następnie szuka najbliższej lokalizacji
na podstawie tych współrzędnych jako punktu początkowego,
Identyfikowanie najbliższych sklepów.
Rozwiń sekcję, by zobaczyć instrukcje dodawania miejsca Autouzupełnianie w aplikacji:
Witryna
Aplikacje na Androida
Aplikacje na iOS
Korzystanie z geolokalizacji w przeglądarce
Zobacz, jak zażądać geolokalizacji w przeglądarce HTML5 i ją obsługiwać. włącz okno Użyj mojej lokalizacji:
Identyfikowanie najbliższych sklepów
| W tym przykładzie zastosowano: Usługa macierzy odległości, Maps JavaScript API | Dostępne też: Interfejs DISTANCE Matrix API |
Gdy znasz lokalizację użytkownika, możesz porównać ją z lokalizacją swojego sklepu w różnych lokalizacjach. Robi to za pomocą Usługa macierzy odległości i interfejs Maps JavaScript API pomaga użytkownikom wybrać z lokalizacji, która jest dla niego najwygodniejsza według czasu jazdy lub odległości.
Standardowym sposobem porządkowania listy lokalizacji jest sortowanie według odległość. Odległość jest często obliczana przy użyciu linii prostej użytkownika do danej lokalizacji, ale może to być mylące. Linia prosta może znajdować się nad nieprzepływającą rzeką lub ruchliwymi drogami w czasie, gdy inne lokalizacja może być wygodniejsza. Jest to ważne, jeśli masz lokalizacje w odległości kilku kilometrów od siebie.
Maps JavaScript API używa usługi matrycy odległości, listy miejsc wylotu i przylotu, a nie tylko powrót ale też czas między nimi. W przypadku użytkownika źródłem będzie ich aktualne miejsce pobytu, pożądany punkt początkowy oraz miejsca docelowe, z lokalizacji. Punkt początkowy i miejsce docelowe można określić jako pary współrzędnych lub jako adresy; gdy zadzwonisz do usługi, usługa zostanie dopasowana adresy. Za pomocą Usługa macierzy odległości, Maps JavaScript API z dodatkowymi aby pokazywać wyniki na podstawie obecnych lub przyszłych godzin przejazdów.
W tym przykładzie funkcja nazywa się Usługa macierzy odległości, Maps JavaScript API, określająca i 25 lokalizacji sklepów jednocześnie.
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 lokalizacji w pobliżu możesz wyświetlić stan magazynowy produktu na podstawie do bazy danych zasobów reklamowych.
Wyświetlanie informacji o sklepie
| W tym przykładzie użyto: Places Library, Maps JavaScript API | Dostępne też: SDK Miejsc na Androida | SDK Miejsc na iOS | Interfejs Places API |
Możesz udostępniać szczegółowe informacje o miejscu, takie jak dane kontaktowe, godziny otwarcia, i obecny stan otwarcia, aby ułatwić klientom wybranie preferowanej lokalizacji lub sfinalizować zamówienie.
Po nawiązaniu połączenia z Maps JavaScript API do pobierania informacji o miejscach, możesz filtrować i renderować odpowiedź.
Aby przesłać prośbę o podanie informacji o miejscu, potrzebujesz identyfikatora miejsca każdej z lokalizacji. Informacje o tym, jak pobrać identyfikatory miejsc swoich danych, znajdziesz w sekcji Uzyskiwanie identyfikatorów miejsc. lokalizacji.
Żądanie dotyczące informacji o miejscu zwraca adres, współrzędne, stronę internetową numer telefonu, ocena i godziny otwarcia dla identyfikatora miejsca Google w Londynie:
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
Zależnie od Twojej firmy lub Twoich potrzeb, możesz ulepszyć z myślą o użytkownikach.
Udostępnianie wskazówek nawigacyjnych
| W tym przykładzie zastosowano: Usługa wskazówek dojazdu w interfejsie Maps JavaScript API | Dostępne też: Directions API do obsługi urządzeń z Androidem i iOS – bezpośrednio w aplikacji lub zdalnie przez serwer proxy |
Jeśli wyświetlasz użytkownikom wskazówki z poziomu witryny lub aplikacji, nie muszą opuszczać witryny i rozpraszać się lub zobaczyć konkurencję na mapie. Możesz nawet pokazać emisję dwutlenku węgla w przypadku konkretny środek transportu i przedstawić wpływ konkretnej trasy za pomocą którego jesteś właścicielem.
Usługa wskazówek dojazdu ma również funkcje, które umożliwiają przetwarzanie wyników możesz łatwo wyświetlać na mapie.
Poniżej przedstawiono przykład wyświetlenia panelu wskazówek dojazdu. Więcej informacji na temat konfiguracji Więcej informacji znajdziesz w sekcji Wyświetlanie wskazówek tekstowych.
Wysyłam trasę na urządzenie mobilne
Aby jeszcze bardziej ułatwić użytkownikom kontakt z lokalizacją, możesz wysyłać SMS-y lub e-maile link do wskazówek dojazdu. Po jego kliknięciu zostanie uruchomiona aplikacja Mapy Google na telefonie użytkownika, jeśli jest zainstalowana, lub strona maps.google.com zostanie wczytana przeglądarki. Obie te funkcje dają użytkownikowi możliwość korzystania szczegółowe wskazówki dojazdu wraz ze wskazówkami głosowymi, aby dotrzeć do celu.
Użyj formatu
mapuje URL-e, by utworzyć adres URL wskazówek dojazdu, jak poniżej,
zakodowana w adresie URL nazwa miejsca jako parametr destination oraz miejsce
jako parametr destination_place_id. Korzystanie z tej funkcji jest bezpłatne
utwórz adresy URL Map Google lub używaj ich, więc nie musisz dołączać klucza interfejsu API
w adresie URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Opcjonalnie możesz podać parametr zapytania origin, używając tego samego
format adresu jako miejsca docelowego. Jeśli jednak je pominiesz, wskazówki dojazdu będą zaczynały się od
bieżąca lokalizacja użytkownika, która może się różnić od bieżącej lokalizacji użytkownika.
aplikacji Lokalizator produktów.
Adresy URL Map Google
udostępnia dodatkowe opcje parametrów zapytania, takie jak travelmode czy
dir_action=navigate, aby uruchomić wskazówki z obróconą nawigacją
włącz.
Klikalny link, który stanowi rozszerzenie przykładowego adresu URL powyżej, ustawia parametr
origin to londyński stadion piłkarski, na którym
travelmode=transit, aby udostępnić wskazówki dojazdu transportem publicznym do
miejsce docelowe.
Aby wysłać SMS-a lub e-maila zawierającego ten URL, zalecamy obecnie użycie aplikacji innych firm, takich jak twilio. Jeśli używasz App Engine, możesz wysyłać SMS-y za pomocą usług innych firm wiadomości lub e-maile. Więcej informacji: Wysyłanie wiadomości przy użyciu usług innych firm.
Wyświetlanie lokalizacji na interaktywnej mapie
Korzystanie z map dynamicznych
| W tym przykładzie wykorzystano: Maps JavaScript API | Dostępne też: Android | iOS |
Lokalizator to ważny element interfejsu, który wpływa na wrażenia użytkownika. Niektóre witryny mogą jednak nie mają nawet prostej mapy, które wymagają od użytkowników opuszczenia witryny lub aplikacji w celu lokalizacji w pobliżu. Oznacza to, że użytkownicy, którzy muszą przełączać się między stronami w celu znalezienia potrzebnych informacji. Zamiast tego: możesz zwiększyć tę wygodę, osadzając i dostosowując mapy aplikacji.
dodanie do strony mapy dynamicznej, czyli mapy, którą użytkownicy mogą przesuwać; powiększania i pomniejszania widoku oraz uzyskiwania szczegółowych informacji o różnych ciekawe miejsca – można wprowadzić kilka linijek kodu.
Najpierw musisz dodać do strony interfejs Maps JavaScript API. Można to zrobić poprzez umieszczenie na stronie HTML linku do poniższego skryptu.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>Adres URL odwołuje się do funkcji JavaScriptu initMap, która działa, gdy
po wczytaniu strony. W adresie URL możesz też określić
języka lub regionu mapy, aby mieć pewność, że jest odpowiednio sformatowana.
w poszczególnych krajach, na które kierujesz reklamy. Ustawienie regionu zapewnia też, że:
zachowanie aplikacji używanych poza Stanami Zjednoczonymi jest stronnicze
wybrany przez Ciebie region. Wyświetl szczegółowe informacje o zasięgu Google Maps Platform.
, aby zobaczyć pełną listę obsługiwanych języków i regionów, oraz dowiedzieć się więcej o
region
za pomocą parametru.
Następnie potrzebujesz kodu HTML div, aby umieścić mapę na stronie.
To miejsce, w którym będzie wyświetlana mapa.
<div id="map"></div>Następnym krokiem jest ustawienie podstawowych funkcji mapy. Odbywa się to w
Funkcja skryptu initMap określona w adresie URL skryptu. W tym skrypcie
jak w poniższym przykładzie, możesz ustawić lokalizację początkową,
rodzaj mapy,
które elementy sterujące będą dostępne na mapie dla użytkowników. Zwróć uwagę, że
getElementById() odwołuje się do „mapy” Identyfikator div.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, zoomControl: false }); }
Jeśli chodzi o lokalizator, zwykle interesuje Cię ustawienie początkowej lokalizacji, punkt środkowy lub granice oraz poziom powiększenia (stopień powiększenia mapy lokalizacja). Większość innych elementów, takich jak dostrajanie elementów sterujących, jest opcjonalna, określają poziom interakcji z mapą.
Dostosowywanie mapy
Wygląd i szczegóły mapy możesz zmienić na kilka sposobów. Dla: na przykład:
- Utwórz własne znaczniki, aby zastąpić domyślne pinezki na mapie.
- Zmień kolory elementów mapy, aby odzwierciedlić swoją markę.
- Decyduj, które ciekawe miejsca mają być wyświetlane (atrakcje, jedzenie, zakwaterowanie itp.) i ich gęstości, aby umożliwić skupienie uwagi użytkowników na lokalizacjach punkty orientacyjne, które pomagają użytkownikom dotrzeć do najbliższej lokalizacji.
Tworzenie niestandardowych znaczników mapy
Możesz dostosować znaczniki, zmieniając kolor domyślny (na przykład czy dana lokalizacja jest w danym momencie otwarta) lub zastąpienie znacznika niestandardowymi takimi jak logo Twojej marki. Okna informacyjne (wyskakujące okienka) mogą podania użytkownikom dodatkowych informacji, takich jak godziny otwarcia, numer telefonu, lub nawet zdjęcia. Możesz również tworzyć własne znaczniki rastrowe, wektorowe, którą można przeciągać, a nawet jest animowana.
Poniżej znajduje się przykładowa mapa z niestandardowymi znacznikami. (Zobacz kod źródłowy w sekcji Temat znaczników niestandardowych Maps JavaScript API).
Szczegółowe informacje znajdziesz w dokumentacji znaczników dla: JavaScript (witryny), Androida oraz iOS:
Wybieranie stylu mapy
Google Maps Platform pozwala dostosować mapę do stylu, aby ułatwić użytkownikom znaleźć najbliższą lokalizację, dotrzeć na miejsce jak najszybciej i pomóc Ci Twoją marką. Możesz na przykład zmienić kolory mapy, aby pasowały do Twojej marki możesz ograniczyć rozpraszanie uwagi na mapie, kontrolując ciekawe miejsca które są widoczne dla użytkowników. Google Maps Platform zapewnia też szablonów początkowych map, z których część jest zoptymalizowana pod kątem różnych branż, takich jak podróże, logistyka, nieruchomości i handel detaliczny.
Style mapy można tworzyć i modyfikować w konsoli Google Cloud Style map w sekcji w projektach AI.
Rozwiń, aby zobaczyć animacje tworzenia stylu mapy stylu w konsoli Cloud:
Style map branży
Animacja pokazująca wstępnie zdefiniowane style mapy branżowe, które możesz i ich używanie. Te style stanowią optymalny punkt wyjścia dla każdego typu z całego świata. Na przykład styl mapy Handel detaliczny zmniejsza liczbę ciekawych miejsc na mapie, dzięki czemu użytkownicy będą mogli skupić się na lokalizacjach, punktów orientacyjnych, dzięki którym można szybko dotrzeć do najbliższej lokalizacji z większą pewnością siebie.
Ustawienia ciekawych miejsc
Ta animacja ustawia kolor znaczników ciekawych miejsc i zwiększa gęstość ciekawych miejsc na stylu mapy. Im większa ich gęstość, na mapie pojawi się więcej znaczników ciekawych miejsc.
Każdy styl mapy ma własny identyfikator. Po opublikowaniu stylu w Cloud Console, 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 z różnych platform. Poniższe przykłady pokazują, jak dodać identyfikator mapy do strony internetowej za pomocą interfejsu Maps JavaScript API.
Poprzez umieszczenie co najmniej jednego elementu map_ids w adresie URL skryptu
Maps JavaScript API automatycznie udostępni te style
aby przyspieszyć renderowanie mapy po wywołaniu tych stylów 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 jest wyświetlany kod HTML
<div id="map"></div> element, w którym pojawi się mapa
na stronie).
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Więcej informacji o wdrażaniu stylów map w chmurze JavaScript (internet), Android oraz iOS:
Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu
W poprzedniej części Wyświetlanie lokalizacji na interaktywnej mapie Opisaliśmy wykorzystanie informacji o miejscu, by umożliwić użytkownikom informacje o Twoich lokalizacjach, takie jak godziny otwarcia, zdjęcia i opinie.
Warto zapoznać się z koszt różnych pól danych w Informacjach o miejscu, które są klasyfikowane jako podstawowe, Dane kontaktowe i atmosferyczne. Aby zarządzać kosztami, jedną ze strategii jest łączenie posiadane informacje o Twoich lokalizacjach wraz z aktualnymi danymi (zwykle dane podstawowe i kontaktowe) z Map Google, np. tymczasowe zamknięcie, świąteczne godziny otwarcia, a także oceny, zdjęcia i opinie użytkowników. Jeśli masz już dane kontaktowe swoich sklepów, nie trzeba prosić o te pola Szczegóły miejsca i mogą ograniczyć żądanie dotyczące pobierania tylko danych podstawowych lub atmosferycznych. Pola danych w zależności od tego, co chcesz wyświetlić.
Możesz mieć własne dane o miejscach do uzupełnienia lub użycia zamiast nich Szczegóły miejsca. ćwiczenia z programowania dla lokalizatora pełnego stosu przedstawia przykład użycia GeoJSON z bazą danych aby zapisać i pobrać informacje o swojej lokalizacji.