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, wskazówkach i odległościach. Przykłady w tym przewodniku zostały napisane z myślą o jednej platformie, 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 korzystania z interfejsów API Google Maps Platform, które pomogą Ci stworzyć świetne narzędzie 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łącz interfejsy API
Aby wdrożyć wyszukiwarkę produktów, musisz włączyć te interfejsy API w konsoli Google Cloud. Te hiperlinki przekierowują Cię do konsoli Google Cloud, gdzie możesz włączyć poszczególne interfejsy API w wybranym projekcie:
- Maps JavaScript API
- Places API
- Geocoding API
- Distance Matrix API (stara wersja)
- Directions API (stara wersja)
Więcej informacji o konfigurowaniu znajdziesz w artykule Pierwsze kroki z Google Maps Platform.
Sekcje przewodnika po implementacji
Tutaj omawiamy te implementacje i modyfikacje:
- Ikona wyboru to kluczowy krok implementacji.
- Ikona gwiazdy jest opcjonalną, ale zalecaną funkcją dostosowywania, która pozwala ulepszać rozwiązanie.
| Przypisywanie lokalizacji sklepów do miejsc w Google Maps Platform | dopasowanie lokalizacji sklepu do miejsca w Google Maps Platform, | |
| Określanie 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. | |
| Znajdowanie najbliższych sklepów | 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 w sklepach obszerne informacje, aby użytkownicy mogli łatwiej je znaleźć. | |
| Podawanie 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 telefon | 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ąć nagromadzenia się elementów na mapie. | |
| Łączenie niestandardowych danych o lokalizacji z informacjami o miejscach | Połącz własne niestandardowe dane o lokalizacji z informacjami o miejscu, aby udostępnić użytkownikom bogaty zestaw danych ułatwiających podejmowanie decyzji. |
Powiązanie lokalizacji sklepów z miejscami w Google Maps Platform
Pobieranie identyfikatorów miejsc
| Ten przykład korzysta z: Places API | Dostępne są też: JavaScript |
Możesz mieć bazę danych ze sklepami zawierającą podstawowe informacje, takie jak nazwa, 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 platforma 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 razem z pozostałymi danymi o sklepie i wykorzystywać go do skutecznego przesyłania żądań informacji 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, na potrzeby 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:
```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: 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 wyboru 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 danych 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ż samodzielnie zaimplementować 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 pole tekstowe na stronie na potrzeby wprowadzania danych 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 miejsc do typów kodów pocztowych powoduje, że pole wprowadzania danych akceptuje adresy ulic, dzielnice, miasta i kod pocztowy, 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(). Uwzględnia ona geometrię dopasowanego wyniku, czyli lokalizację użytkownika, a następnie wyszukuje najbliższe lokalizacje na podstawie tych współrzędnych jako punktu wyjścia. Więcej informacji znajdziesz w sekcji Identyfikowanie najbliższych sklepów.
Rozwiń ten element, aby obejrzeć samouczki wideo dotyczące dodawania do aplikacji funkcji Autouzupełnianie:
Witryna
Aplikacje na Androida
Aplikacje na iOS
Korzystanie z lokalizacji geograficznej przeglądarki
Aby wysłać żądanie geolokalizacji w przeglądarce HTML5 i z nim pracować, włącz okno Użyj mojej lokalizacji:
Znajdowanie najbliższych sklepów
| Ten przykład korzysta z: Usługa macierzy odległości, Maps JavaScript API (starsza wersja) | Dostępne są też: Distance Matrix API (starsza wersja) |
Gdy poznasz lokalizację użytkownika, możesz ją porównać z lokalizacją Twoich sklepów. Wykorzystanie usługi macierzy odległości w Maps JavaScript API (starsza wersja) pomaga użytkownikom wybrać lokalizację, która jest dla nich najwygodniejsza pod względem czasu jazdy 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 (starsza wersja) działa na podstawie listy lokalizacji źródłowych i docelowych, zwracając 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 punkt docelowy to lokalizacja. Początki i miejsca docelowe mogą być określone jako pary współrzędnych lub jako adresy. Gdy wywołasz usługę, usługa dopasowuje adresy. Możesz użyć usługi Distance Matrix Service, Maps JavaScript API (starsza wersja) z dodatkowymi parametrami, aby wyświetlić wyniki na podstawie bieżącego lub przyszłego czasu jazdy.
W tym przykładzie wywołujemy usługę DistanceMatrixService, Maps JavaScript API (wcześniejsza wersja), podając punkt początkowy użytkownika i 25 lokalizacji sklepów naraz.
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ż te opcje: Pakiet SDK Miejsca na Androida | Pakiet SDK Miejsca na iOS | API Miejsca |
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żdego z Twoich miejsc. Aby pobrać identyfikator miejsca, w którym się znajdujesz, przeczytaj artykuł 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); } }
Ulepszenie 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 dotyczące nawigacji
| Ten przykład korzysta z: Maps JavaScript API Usługa wyznaczania trasy | Dostępne są też: Directions API (Legacy) 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 nie muszą widzieć na mapie konkurencji. 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 przedstawiamy 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 danej 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, który będzie wyglądał tak: parametr destination to zakodowana w adresie URL nazwa miejsca, a parametr destination_place_id to identyfikator miejsca. 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 w przypadku miejsca docelowego. 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 do celu transportem publicznym.
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ż na: Android | iOS |
Lokalizator to ważny element wrażeń użytkownika. Niektóre witryny 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 dostosowując je do swoich potrzeb.
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, wymaga tylko 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ż określić język lub region mapy, aby mieć pewność, że jest ona prawidłowo sformatowana pod kątem wybranego kraju. Ustawienie regionu zapewnia też, że działanie aplikacji używanych poza Stanami Zjednoczonymi będzie zbliżone do tego, które jest ustawione w 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 orientacyjne wyświetlasz (atrakcje, restauracje, obiekty noclegowe itp.) 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ą użytkownikom dotrzeć do najbliższej lokalizacji.
Tworzenie niestandardowych znaczników mapy
Możesz dostosować znaczniki, zmieniając ich domyślny kolor (co może wskazywać, czy lokalizacja jest obecnie otwarta) lub zastępując je 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.
Nadaj styl mapie
Google Maps Platform umożliwia stylizowanie mapy w sposób, który pomaga użytkownikom znaleźć najbliższą lokalizację, dotrzeć do niej tak szybko, jak to możliwe, oraz 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 mapy możesz tworzyć i modyfikować na stronie Style mapy w konsoli Google Cloud w projekcie.
Rozwiń, aby zobaczyć animacje tworzenia stylów map i stylizacji w konsoli Cloud:
Style mapy dla branży
Animacja pokazująca wstępnie zdefiniowane style mapy dostosowane do 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 handlu detalicznego ogranicza 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 ciekawych miejsc i zwiększa ich zagęszczenie 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 konsoli Cloud 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 stylem 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 Pokaż swoje lokalizacje na interaktywnej mapie omawialiśmy korzystanie z szczegółowych informacji o miejscu, 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 danymi 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 tych pól z karty Szczegóły, a możesz ograniczyć żądanie do pobrania tylko pól danych Podstawowych lub Atmosfera, w zależności od tego, co chcesz wyświetlić.
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.