Lokalizator produktów – przewodnik po implementacji

Przegląd

web iOS Interfejs API

Usługa Google Maps Platform jest dostępna w wersji internetowej (JS, TS), na Androida i iOS. Oferuje również interfejsy API usług internetowych do uzyskiwania informacji o miejscach, trasach dojazdu i odległościach. Przykłady w tym przewodniku zostały napisane z myślą o 1 platformie, ale podane są linki do dokumentacji na potrzeby implementacji na innych platformach.

Gdy użytkownicy widzą Twoje produkty w internecie, chcą znaleźć najlepszy i najwygodniejszy sposób ich odbioru. Przewodnik po implementacji Lokalizatora produktów i wskazówki dotyczące dostosowywania, które podajemy w tym temacie, to optymalne połączenie interfejsów API Google Maps Platform, które zapewnia użytkownikom dużą wygodę korzystania z lokalizatora produktów.

Korzystając z tego przewodnika po implementacji, możesz pokazać klientom szczegółowe informacje potrzebne do znalezienia Twoich produktów i wskazać im wskazówki dojazdu do sklepu, w którym mogą kupić dany produkt, bez względu na to, czy jadą samochodem, rowerem, idzie na piechotę czy podróżuje transportem publicznym.

Schemat architektoniczny
Schemat architektoniczny (kliknij, aby powiększyć)

Włączam interfejsy API

Aby wdrożyć Lokalizator produktów, musisz włączyć poniższe interfejsy API w konsoli Google Cloud. Te hiperlinki przekierują Cię do konsoli Google Cloud umożliwiającej włączenie poszczególnych interfejsów API w wybranym projekcie:

Więcej informacji o konfiguracji znajdziesz w artykule Pierwsze kroki z Google Maps Platform.

Sekcje z przewodnikiem po implementacji

Poniżej omawiamy implementacje i opcje dostosowywania, które omówimy w tym temacie.

  • Głównym krokiem w implementacji jest ikona znacznika wyboru.
  • Ikona gwiazdki to opcjonalne, ale zalecane dostosowanie, które 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, aby zwiększyć wygodę użytkowników na wszystkich platformach i zwiększyć dokładność adresów przy minimalnej liczbie naciśnięć klawiszy.
Identyfikowanie najbliższych sklepów Oblicz odległość i czas podróży dla wielu miejsc wylotu i miejsc docelowych, opcjonalnie określając różne środki transportu, takie jak spacer, jazda samochodem, transport publiczny czy jazda na rowerze.
Wyświetlanie informacji o sklepie Wyświetlaj bogate w dane informacje o swoich sklepach, aby użytkownicy mogli łatwiej do nich dotrzeć.
Podawanie wskazówek dojazdu Wyznacz trasę dojazdu z miejsca wylotu do miejsca docelowego, korzystając z różnych form transportu, np. pieszo, samochodem, rowerem i transportem publicznym.
Wysyłanie trasy na komórkę Oprócz wyświetlania wskazówek dojazdu na swojej stronie internetowej możesz też wysyłać ją na telefon użytkownika w celu umożliwienia nawigacji za pomocą Map Google w podróży.
Wyświetlanie lokalizacji na interaktywnej mapie Utwórz niestandardowe znaczniki mapy, aby wyróżnić swoje lokalizacje, i dostosuj mapę do kolorów swojej marki. Wyświetlaj (lub ukrywaj) konkretne ciekawe miejsca na mapie, aby ułatwić użytkownikom poruszanie się po okolicy, i kontroluj ich gęstość, aby uniknąć zaśmiecania mapy.
Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu Połącz własne niestandardowe informacje o lokalizacji ze szczegółami miejsca, aby zapewnić użytkownikom szeroki zestaw danych umożliwiających podejmowanie decyzji.

Powiązanie lokalizacji sklepów z miejscami w Google Maps Platform

Pobieram identyfikatory miejsc

W tym przykładzie zastosowano: interfejs Places API Dostępny też: JavaScript

Możesz mieć bazę danych swoich sklepów z podstawowymi informacjami, takimi jak nazwa tej lokalizacji, jej adres i numer telefonu, i chcesz ją powiązać z miejscem w Google Maps Platform jako zestawem miejsc docelowych, do których użytkownicy mogą odebrać produkty. Aby pobrać informacje o tym miejscu zebrane przez Google Maps Platform, 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ź punkt końcowy w wyniku wyszukiwania miejsc interfejsu Places API i poprosić o skonfigurowanie samego pola place_id.

Poniżej znajdziesz 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 bazie danych razem z pozostałymi danymi sklepu i używać go jako efektywnego sposobu wysyłania próśb o informacje o sklepie. Poniżej znajdziesz instrukcje, jak użyć identyfikatora miejsca do geokodowania, pobrania informacji o miejscu i uzyskania wskazówek dojazdu do tego miejsca.

Geokodowanie lokalizacji

W tym przykładzie zastosowano: interfejs Geocoding API Dostępny też: JavaScript

Jeśli Twoja baza danych sklepów zawiera adresy, ale nie współrzędne geograficzne, użyj interfejsu Geocoding API, aby uzyskać szerokość i długość geograficzną tego adresu i ustalić, które sklepy znajdują się najbliżej klienta. Możesz przetworzyć dane geograficzne sklepu po stronie serwera, zapisać szerokości i długości geograficzne w bazie danych oraz odświeżać 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

W tym przykładzie użyto: Biblioteki autouzupełniania Miejsc w interfejsie Maps JavaScript API Dostępny też: Android | iOS

Kluczowym komponentem Lokalizatora produktów jest identyfikowanie lokalizacji początkowej użytkownika. Możesz udostępnić użytkownikowi 2 opcje określania lokalizacji początkowej: wpisanie miejsca początkowego wyszukiwania lub przyznanie uprawnień do geolokalizacji w przeglądarce lub usług lokalizacyjnych dla urządzeń mobilnych.

Obsługa wpisywanych wpisów przy użyciu autouzupełniania

Dzisiejsi użytkownicy są przyzwyczajeni do funkcji autouzupełniania w Mapach Google dla użytkowników indywidualnych. Funkcję tę można zintegrować z dowolną aplikacją korzystającą z bibliotek Miejsc Google Maps Platform na urządzeniach mobilnych i w internecie. Gdy użytkownik wpisze adres, autouzupełnianie wypełnia resztę za pomocą widżetów. Możesz też dodać własne funkcje autouzupełniania bezpośrednio z bibliotek Miejsc.

Funkcja autouzupełniania adresu
Funkcja autouzupełniania adresu (kliknij, aby powiększyć)

W poniższym przykładzie dodaj do swojej witryny bibliotekę autouzupełniania, dodając parametr libraries=places do adresu 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 nazwanym polem tekstowym. Ograniczenie podpowiedzi autouzupełniania miejsc do typów geokodów powoduje skonfigurowanie pola do wprowadzania danych w taki sposób, aby akceptuje adresy pocztowe, dzielnice, miasta i kody pocztowe. Dzięki temu użytkownicy będą mogli wpisać dowolny poziom szczegółowości, aby opisać źródło pochodzenia. Pamiętaj, aby poprosić o pole geometry, aby odpowiedź zawierała szerokość i długość geograficzną punktu początkowego użytkownika. Służą one do określania relacji między lokalizacjami a punktem początkowym mapy.

// 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(). Ta funkcja pobiera geometrię dopasowanego wyniku, czyli lokalizacji użytkownika, a następnie wyszukuje najbliższe lokalizacje na podstawie tych współrzędnych jako punktu początkowego, co zostało omówione w sekcji Identyfikowanie najbliższych sklepów.

Pokazuję opcje lokalizacji
Wyświetlam opcje lokalizacji (kliknij, aby powiększyć)

Rozwiń sekcję, aby zobaczyć instrukcje dodawania autouzupełniania miejsc do aplikacji:

Witryna

Aplikacje na Androida

Aplikacje na iOS

Korzystanie z geolokalizacji w przeglądarce

Jeśli chcesz poprosić o obsługę geolokalizacji w przeglądarce HTML5, dowiedz się, jak włączyć okno Użyj mojej lokalizacji:

Uprawnienia przeglądarki dotyczące lokalizacji użytkownika
Prośba o uprawnienia do przeglądarki (kliknij, aby powiększyć)

Identyfikowanie najbliższych sklepów

W tym przykładzie użyto: Usługa macierzy odległości, Maps JavaScript API Dostępny także: Reach Matrix API

Gdy znasz już lokalizację użytkownika, możesz porównać ją z lokalizacją Twoich sklepów. Dzięki usłudze matrycy odległości, Maps JavaScript API pomaga użytkownikom wybrać najwygodniejszą lokalizację na podstawie czasu jazdy lub odległości.

Standardowym sposobem porządkowania listy lokalizacji jest sortowanie ich według odległości. Odległość jest często obliczana po prostu przy użyciu linii prostej od użytkownika do lokalizacji, ale może to wprowadzać w błąd. Linia prosta może przebiegać nad nieprzekraczającą rzeką lub ruchliwymi drogami w czasie, gdy inne miejsce może być bardziej dogodne. Jest to ważne, gdy Twoja firma ma wiele lokalizacji w odległości kilku kilometrów.

Maps JavaScript API używa usługi matrycy odległości, która pobiera listę miejsc wylotu i przylotu, a potem zwraca nie tylko odległość od miejsca, w którym odbywa się podróż, ale też czas między nimi. W przypadku użytkownika punktem początkowym jest miejsce, w którym aktualnie się znajduje lub żądany punkt początkowy, a miejscami docelowymi – wszystkie lokalizacje. Punkty początkowe i miejsca docelowe można określić w postaci par współrzędnych lub jako adresy. Przy wywołaniu usługi usługa dopasowuje się do adresów. Możesz użyć usługi macierzy odległości i interfejsu Maps JavaScript API z dodatkowymi parametrami, aby wyświetlać wyniki na podstawie obecnych lub przyszłych czasów przejazdów.

Ten przykład wywołuje usługę matrycy odległości, Maps JavaScript API, określając źródło 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 lokalizacji w pobliżu możesz wyświetlić stan magazynowy produktu określony na podstawie bazy danych asortymentu.

Wyświetlanie informacji o sklepie

W tym przykładzie użyto: Places Library, Maps JavaScript API Dostępny także: Places SDK for Android | Places SDK for iOS | Places API

Aby ułatwić klientom wybranie preferowanej lokalizacji lub sfinalizowanie zamówienia, możesz udostępniać szczegółowe informacje o miejscu, takie jak dane kontaktowe, godziny otwarcia i aktualny status firmy.

Po wywołaniu interfejsu Maps JavaScript API w celu pobrania informacji o miejscu możesz filtrować i renderować odpowiedź.

Pokazuję opcje sklepu
Wyświetlam opcje sklepu (kliknij, aby powiększyć)

Aby przesłać prośbę o podanie informacji o miejscu, potrzebujesz identyfikatora miejsca każdej z lokalizacji. Aby dowiedzieć się, jak pobrać identyfikator miejsca dla swojej lokalizacji, zapoznaj się z sekcją Uzyskiwanie identyfikatorów miejsc.

W prośbie o informacje o miejscu podane są adres, współrzędne, adres strony internetowej, numer telefonu, ocena i godziny pracy związane z identyfikatorem miejsca w 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 firmy lub potrzeb użytkowników możesz jeszcze bardziej polepszyć wrażenia użytkowników.

Udostępnianie wskazówek nawigacyjnych

W tym przykładzie użyto: Usługa wskazówek dojazdu interfejsu Maps JavaScript API Dostępny także: usługa internetowa Directions API do użytku na Androidzie i iOS – bezpośrednio z aplikacji lub zdalnie przez serwer proxy serwera

Pokazując użytkownikom wskazówki dojazdu z poziomu witryny lub aplikacji, nie muszą oni opuszczać witryny i rozproszać się po innych stronach ani widzieć konkurencji na mapie. Możesz nawet pokazać emisję dwutlenku węgla w przypadku konkretnego środka transportu i wpływ tej podróży, korzystając z posiadanego zbioru danych dotyczących emisji dwutlenku węgla.

Usługa wskazówek dojazdu ma również funkcje umożliwiające przetwarzanie wyników i łatwe wyświetlanie ich na mapie.

Poniżej przedstawiono przykład wyświetlenia panelu wskazówek dojazdu. Więcej informacji o przykładzie znajdziesz w artykule Wyświetlanie wskazówek tekstowych.

Wysyłam trasę na urządzenie mobilne

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. Po jej kliknięciu uruchomi się na telefonie aplikację Mapy Google (jeśli jest zainstalowana) lub strona maps.google.com zostanie wczytana w przeglądarce urządzenia. Obie te opcje dają użytkownikom możliwość korzystania ze szczegółowej nawigacji (w tym ze wskazówek głosowych) w celu dotarcia do celu.

Użyj opcji Adresy URL Map Google, aby utworzyć adres URL wskazówek dojazdu jak poniżej z zakodowaną w adresie URL nazwą miejsca jako parametrem destination i identyfikatorem miejsca jako parametrem destination_place_id. Tworzenie i używanie adresów URL Map Google jest bezpłatne, więc nie musisz dodawać klucza interfejsu API do adresów URL.

https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

Opcjonalnie możesz podać parametr zapytania origin w tym samym formacie adresu co miejsce docelowe. Jeśli je pominiesz, wskazówki będą rozpoczynać się od bieżącej lokalizacji użytkownika, która może różnić się od miejsca, w którym korzystał on z aplikacji Lokalizator produktów. Adresy URL Map udostępniają dodatkowe opcje parametrów zapytania, takie jak travelmode i dir_action=navigate, które pozwalają uruchamiać wskazówki przy włączonej nawigacji.

Ten klikalny link, który rozszerza przykładowy adres URL powyżej, ustawia origin jako stadion piłkarski Londynu i używa travelmode=transit do podawania wskazówek dojazdu transportem publicznym do miejsca docelowego.

Obecnie do wysłania SMS-a lub e-maila zawierającego ten URL zalecamy użycie aplikacji innej firmy, takiej jak twilio. Jeśli używasz App Engine, możesz wysyłać SMS-y i e-maile za pomocą usług innych firm. Więcej informacji znajdziesz w artykule o wysyłaniu wiadomości przy użyciu usług innych firm.

Wyświetlanie lokalizacji na interaktywnej mapie

Korzystanie z map dynamicznych

W tym przykładzie użyto: Maps JavaScript API Dostępny też: Android | iOS

Lokalizator to ważny element interfejsu, który wpływa na wrażenia użytkownika. W niektórych witrynach może jednak brakować nawet prostej mapy, co wymaga od użytkowników opuszczenia witryny lub aplikacji w celu znalezienia pobliskiej lokalizacji. co utrudnia użytkownikom przechodzenie między stronami w celu uzyskania potrzebnych informacji. Zamiast tego możesz ulepszyć tę funkcję, osadzając i dostosowując mapy do swoich aplikacji.

Dodanie do strony dynamicznej mapy, czyli mapy, którą użytkownicy mogą przesuwać, powiększać i pomniejszać oraz uzyskiwać szczegółowe informacje o różnych lokalizacjach i ciekawych miejscach, można dodać za pomocą kilku wierszy 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 uruchamia się podczas wczytywania strony. W adresie URL możesz też określić język lub region mapy, aby mieć pewność, że będzie ona prawidłowo sformatowana pod kątem kraju, na który kierujesz reklamy. Ustawienie regionu daje też pewność, że aplikacje używane poza Stanami Zjednoczonymi będą działać stronnicze w stosunku do wybranego regionu. Pełną listę obsługiwanych języków i regionów znajdziesz w informacjach o zasięgu Google Maps Platform. Dowiedz się też więcej o korzystaniu z parametrów region.

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. Można to zrobić w funkcji skryptu initMap określonej w adresie URL skryptu. W tym skrypcie, pokazanym w przykładzie poniżej, możesz ustawić lokalizację początkową, typ mapy oraz elementy sterujące, które będą dostępne na mapie dla użytkowników. Zwróć uwagę, że parametr getElementById() odwołuje się do powyższego identyfikatora div „mapy”.

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 najbardziej przydatne jest ustawienie lokalizacji początkowej, punktu centralnego lub granic, a także poziomu powiększenia (stopnia powiększenia danej lokalizacji). Większość innych elementów, takich jak dostrajanie elementów sterujących, jest opcjonalna, ponieważ określasz poziom interakcji z mapą.

Dostosowywanie mapy

Wygląd i szczegóły mapy możesz zmienić na kilka sposobów. Możesz 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ę.
  • Możesz kontrolować, które atrakcje chcesz wyświetlać (atrakcje, jedzenie, zakwaterowanie itd.) i ich gęstość. Pozwoli Ci to skupić uwagę użytkowników na Twojej lokalizacji i wyróżnić punkty orientacyjne, które pomagają mu dotrzeć do najbliższej lokalizacji.

Tworzenie niestandardowych znaczników mapy

Możesz dostosować znaczniki, zmieniając kolor domyślny (na przykład pokazując, czy dana lokalizacja jest obecnie otwarta) lub zastępując znacznik niestandardowym obrazem, np. logo Twojej marki. Okna informacyjne lub wyskakujące okienka mogą zawierać dodatkowe informacje, np. godziny otwarcia, numer telefonu, a nawet zdjęcia. Możesz również tworzyć niestandardowe znaczniki, które są rastrowe, wektorowe, przeciągane, a nawet animowane.

Poniżej znajduje się przykładowa mapa z niestandardowymi znacznikami. Kod źródłowy znajdziesz w temacie o znacznikach niestandardowych interfejsu Maps JavaScript API.

Szczegółowe informacje znajdziesz w dokumentacji znaczników JavaScript (internet), Androida i iOS.

Wybieranie stylu mapy

Google Maps Platform pozwala dostosować styl mapy w sposób, który pomaga użytkownikom znaleźć najbliższą lokalizację i dotrzeć do niej jak najszybciej, a także pomaga wzmocnić wizerunek marki. Możesz na przykład zmieniać kolory mapy, 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 też wiele szablonów początkowych map, z których niektóre są zoptymalizowane pod kątem różnych branż, takich jak podróże, logistyka, nieruchomości i handel detaliczny.

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ży

Ta animacja pokazuje wstępnie zdefiniowane style mapy specyficzne dla branży. Te style stanowią optymalny punkt wyjścia dla każdego rodzaju branży. Na przykład styl mapy dla handlu detalicznego zmniejsza interesujące ich miejsca na mapie, dzięki czemu użytkownicy mogą skupić się na Twoich lokalizacjach oraz na punktach orientacyjnych, dzięki którym mogą szybko i bezpiecznie dotrzeć do najbliższej lokalizacji.

Na stronie Styl mapy klikamy przycisk Utwórz nowy styl mapy. Na stronie Nowy styl mapy użytkownik kliknie przycisk opcji obok każdego z stylów zoptymalizowanych pod kątem branży: Podróże, logistyka, Nieruchomości i Handel detaliczny. Po kliknięciu każdego przycisku zmieniają się opis stylu mapy i podgląd graficzny.

Ustawienia ciekawych miejsc

Ta animacja ustawia kolor znacznika ciekawych miejsc i zwiększa gęstość ciekawych miejsc na stylu mapy. Im większa gęstość, tym więcej znaczników ciekawych miejsc pojawi się na mapie.

Na stronie Styl mapy klikamy przycisk Utwórz nowy styl mapy. Na stronie Nowy styl mapy w sekcji Utwórz własny styl zaznaczono opcję Mapa Google. Kliknij przycisk myszy opcji stylu Atlas, a następnie wybierz Otwórz w edytorze stylów. W edytorze stylu klikamy myszą opcję ciekawego miejsca, a następnie element Ikona, zmieniając jego kolor na czerwony. Mysz zaznacza pole wyboru Gęstość ciekawego miejsca i przesuwa element sterujący gęstością w prawo, by uzyskać maksymalną gęstość. W miarę zwiększania gęstości na podglądzie mapy pojawia się coraz więcej czerwonych znaczników. Mysz przejdzie do przycisku Zapisz.

Każdy styl mapy ma własny identyfikator. Po opublikowaniu stylu w konsoli Cloud odwołujesz się do identyfikatora mapy w kodzie. Oznacza to, że możesz aktualizować styl mapy w czasie rzeczywistym bez refaktoryzacji aplikacji. Nowy wygląd pojawi się automatycznie 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.

Jeśli umieścisz co najmniej 1 map_ids w adresie URL skryptu, interfejs Maps JavaScript API automatycznie udostępni te style, aby przyspieszyć renderowanie mapy, gdy wywołasz te style w kodzie.

<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>

Poniższy kod wyświetla na stronie internetowej mapę ze stylem. (Niewidoczny jest element HTML <div id="map"></div>, w którym na stronie pojawi się mapa).

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});

Dowiedz się więcej o wdrażaniu stylów map w chmurze w języku JavaScript (w przeglądarce), na Androidzie oraz w iOS.

Łączenie niestandardowych danych o lokalizacji z informacjami o miejscu

W poprzedniej sekcji Wyświetlanie lokalizacji na interaktywnej mapie omówiliśmy korzystanie z szczegółów miejsca, aby zapewnić użytkownikom szczegółowe informacje o lokalizacji, np. godziny otwarcia, zdjęcia i opinie.

Warto znać koszty poszczególnych pól danych w szczegółach miejsca, które są podzielone na kategorie Podstawowe, Dane kontaktowe i Klimat. Jedną ze strategii, która pozwala zarządzać kosztami, jest połączenie informacji, które już masz o lokalizacjach, z najnowszymi informacjami (zwykle danymi podstawowymi i kontaktowymi) z Map Google, takimi jak tymczasowe zamknięcie, godziny otwarcia oraz oceny, zdjęcia i opinie użytkowników. Jeśli masz już dane kontaktowe swoich sklepów, nie musisz prosić o te pola w szczegółach miejsca i możesz ograniczyć pobieranie tylko pól podstawowych lub danych atmosferycznych w zależności od tego, co chcesz wyświetlić.

Możesz mieć własne dane dotyczące miejsc do uzupełnienia lub użycia zamiast nich. Ćwiczenie z programowania dotyczące lokalizatora pełnego stosu zawiera przykład użycia GeoJSON z bazą danych do przechowywania i pobierania szczegółów lokalizacji.