Tworzenie interaktywnego lokalizatora sklepów za pomocą pakietu UI do Miejsc

Cel

Ten dokument zawiera omówienie kluczowych kroków do opracowania interaktywnej aplikacji do wyszukiwania sklepów za pomocą platformy Google Maps Platform, w szczególności interfejsu Maps JavaScript API i elementu Places UI Kit: Place Details Element. Dowiedz się, jak utworzyć mapę z lokalizacją sklepów, dynamicznie aktualizować listę widocznych sklepów i wyświetlać szczegółowe informacje o każdym sklepie.

Wymagania wstępne

Zalecamy zapoznanie się z tymi materiałami:

Włącz w projekcie interfejs Maps JavaScript API i Places UI Kit.

Zanim zaczniesz, sprawdź, czy załadowano interfejs Maps JavaScript API i czy zaimportowano wymagane biblioteki zaawansowanych znaczników oraz UI Kit Miejsca. Dokument zakłada też, że masz praktyczną znajomość programowania stron internetowych, w tym HTML, CSS i JavaScript.

Konfiguracja początkowa

Pierwszym krokiem jest dodanie mapy do strony. Na tej mapie będą wyświetlane pinezki związane z lokalizacjami Twoich sklepów.

Mapę możesz dodać do strony na 2 sposoby:

  1. Korzystanie z komponentu internetowego HTML gmp-map
  2. za pomocą JavaScript,

Wybierz metodę, która najlepiej pasuje do Twojego zastosowania. W tym przewodniku omówiliśmy obie metody implementacji mapy.

Prezentacja

W tym filmie pokazuję, jak działa wyszukiwarka sklepów, wyświetlając lokalizacje biur Google w Dolinie Krzemowej. Element Szczegóły miejsca jest wyświetlany w przypadku każdej lokalizacji wraz z kilkoma przykładowymi atrybutami.

Ładowanie i wyświetlanie lokalizacji sklepów

W tej sekcji wczytamy i wyświetlamy na mapie dane o Twoim sklepie. W tym przewodniku zakładamy, że masz repozytorium informacji o istniejących sklepach, z którego możesz korzystać. Dane o sklepie mogą pochodzić z różnych źródeł, np. z Twojej bazy danych. W tym przykładzie zakładamy, że lokalny plik JSON (stores.json) zawiera tablicę obiektów sklepu, z których każdy reprezentuje jedną lokalizację sklepu. Każdy obiekt powinien zawierać co najmniej name, location (z lat i lng) oraz place_id.

Jeśli nie masz jeszcze identyfikatorów miejsc dla lokalizacji sklepów, możesz je pobrać na różne sposoby. Więcej informacji znajdziesz w dokumentacji usługi Place ID.

Przykład wpisu z informacjami o sklepie w pliku stores.json może wyglądać tak: Są tam pola Nazwa, Lokalizacja (szerokość/długość geograficzna) i Identyfikator miejsca. Jest obiekt, który przechowuje godziny otwarcia sklepu (obcięte). Dostępne są też 2 wartości logiczne, które pomagają opisać funkcje niestandardowe lokalizacji sklepu.

{
  "name": "Example Store Alpha",
  "location": { "lat": 51.51, "lng": -0.12 },
  "place_id": "YOUR_STORE_PLACE_ID",
  "opening_hours": { "Monday": "09:00 - 17:00", "...": "..." },
  "new_store_design": true,
  "indoor_seating": false
}

W kodzie JavaScript pobierz dane o lokalizacjach sklepów i wyświetl na mapie pinezkę dla każdego sklepu.

Oto przykład, jak to zrobić. Ta funkcja przyjmuje obiekt zawierający szczegóły sklepów i tworzy znacznik na podstawie lokalizacji każdego z nich.

function displayInitialMarkers(storeLocations) {
    if (!AdvancedMarkerElement || !LatLng || !mapElement) return;
    storeLocations.forEach(store => {
        if (store.location) {
            const marker = new AdvancedMarkerElement({
                position: new LatLng(store.location.lat, store.location.lng),
                title: store.name
            });
            mapElement.appendChild(marker);
        }
    });
}

Po załadowaniu sklepów i wyświetleniu na mapie pinezek z ich lokalizacjami utwórz pasek boczny za pomocą HTML i CSS, aby wyświetlać szczegóły dotyczące poszczególnych sklepów.

Przykład tego, jak na tym etapie może wyglądać wyszukiwarka sklepów:

obraz

Nasłuchiwanie zmian widocznego obszaru mapy

Aby zoptymalizować wydajność i wygodę użytkowników, zaktualizuj aplikację, aby wyświetlała znaczniki i szczegóły na pasku bocznym tylko wtedy, gdy ich położenie znajduje się w widocznym obszarze mapy (widok). Polega to na nasłuchiwaniu zmian widoku mapy, debouncingu tych zdarzeń, a następnie na ponownym rysowaniu tylko niezbędnych znaczników.

Dołącz odbiornik zdarzeń do zdarzenia bezczynności mapy. To zdarzenie jest wywoływane po zakończeniu wszelkich operacji przesuwania lub powiększania, zapewniając stabilny widok do wykonania obliczeń.

map.addListener('idle', debounce(updateMarkersInView, 300));

Powyższy fragment kodu nasłuchuje zdarzenia idle i wywołuje funkcję debounce. Dzięki funkcji debounce logika aktualizacji znacznika działa tylko wtedy, gdy użytkownik przestanie przez krótki czas wchodzić w interakcje z mapą, co poprawia wydajność.

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

Powyższy kod jest przykładem funkcji debounce. Przyjmuje funkcję i argument opóźnienia, który jest przekazywany do listenera w stanie bezczynności. Opóźnienie 300 ms wystarczy, aby mapa przestała się poruszać, bez dodawania zauważalnego opóźnienia do interfejsu. Po upływie tego limitu czasu wywoływana jest przekazana funkcja, w tym przypadku funkcja updateMarkersInView.

Funkcja updateMarkersInView powinna wykonywać te działania:

Wyczyść z mapy wszystkie istniejące znaczniki

Sprawdź, czy lokalizacja sklepu mieści się w bieżących granicach mapy, na przykład:

if (map.getBounds().contains(storeLatLng)) {
  // logic
}

W ramach instrukcji if powyżej napisz kod, który wyświetla znaczniki i szczegóły sklepu na pasku bocznym, jeśli lokalizacja sklepu mieści się w widoku mapy.

Wyświetlanie szczegółowych informacji o miejscach za pomocą elementu Szczegóły miejsca

Na tym etapie aplikacja wyświetla wszystkie lokalizacje sklepów, a użytkownicy mogą je filtrować na podstawie widoku mapy. Aby ulepszyć ten proces, dodaliśmy szczegółowe informacje o każdym sklepie, takie jak zdjęcia, opinie i informacje o dostępności, za pomocą elementu Szczegóły miejsca. W tym przykładzie wykorzystano element Szczegóły miejsca w wersji kompaktowej.

Każda lokalizacja sklepu w źródle danych musi mieć odpowiadający jej identyfikator miejsca. Ten identyfikator jednoznacznie identyfikuje lokalizację w Mapach Google i jest niezbędny do pobierania jej szczegółów. Zwykle identyfikatory miejsc są pozyskiwane wcześniej i przechowywane w przypadku każdego rekordu sklepu.

Integracja kompaktowego elementu Szczegóły miejsca w aplikacji

Gdy sklep zostanie zlokalizowany w bieżącym widoku mapy i wyrenderowany na pasku bocznym, możesz dynamicznie utworzyć i wstawić dla niego element kompaktowy Szczegóły miejsca.

W przypadku bieżącego sklepu, który jest przetwarzany, pobierz identyfikator miejsca z danych. Identyfikator miejsca służy do określania, w którym miejscu ma się wyświetlać element.

W JavaScript dynamicznie utwórz instancję PlaceDetailsCompactElement. Utworzony zostaje też nowy obiekt PlaceDetailsPlaceRequestElement, do którego przekazany zostaje identyfikator miejsca, a następnie dołączony do obiektu PlaceDetailsCompactElement. Na koniec użyj elementu PlaceContentConfigElement, aby skonfigurować wyświetlane treści.

Funkcja ta zakłada, że niezbędne biblioteki pakietu UI Kit dotyczące miejsc zostały zaimportowane i są dostępne w zakresie, w którym wywoływana jest ta funkcja, a wartość storeData przekazana do funkcji zawiera place_id.

Ta funkcja zwróci element, a kod wywołujący będzie odpowiedzialny za dołączenie go do DOM.

function createPlaceDetailsCompactElement(storeData) {
    // Create the main details component
    const detailsCompact = new PlaceDetailsCompactElement();
    detailsCompact.setAttribute('orientation', 'vertical'); // Or 'horizontal'

    // Specify the Place ID
    const placeRequest = new PlaceDetailsPlaceRequestElement();
    placeRequest.place = storeData.place_id;
    detailsCompact.appendChild(placeRequest);

    // Configure which content elements to display
    const contentConfig = new PlaceContentConfigElement();
    // For this example, we'll render media, rating, accessibility, and attribution:
    contentConfig.appendChild(new PlaceMediaElement({ lightboxPreferred: true }));
    contentConfig.appendChild(new PlaceRatingElement());
    contentConfig.appendChild(new PlaceAccessibleEntranceIconElement());
    // Configure attribution
    const placeAttribution = new PlaceAttributionElement();
    placeAttribution.setAttribute('light-scheme-color', 'gray');
    placeAttribution.setAttribute('dark-scheme-color', 'gray');
    contentConfig.appendChild(placeAttribution);
    detailsCompact.appendChild(contentConfig);
    // Return the element
    return detailsCompact;
}

W przykładowym kodzie powyżej element jest skonfigurowany tak, aby wyświetlać zdjęcia obiektu, ocenę w opiniach i informacje o ułatwieniach dostępu. Możesz dostosować ten element, dodając lub usuwając inne dostępne elementy treści. Aby poznać wszystkie dostępne opcje, zapoznaj się z dokumentacjąPlaceContentConfigElement.

Element kompaktowy Szczegóły miejsca obsługuje stylizację za pomocą właściwości niestandardowych CSS. Dzięki temu możesz dostosować wygląd (kolory, czcionki itp.) do projektu aplikacji. Zastosuj te właściwości niestandardowe w pliku CSS. Informacje o obsługiwanych właściwościach CSS znajdziesz w dokumentacji PlaceDetailsCompactElement.

Przykład tego, jak Twoja aplikacja może wyglądać na tym etapie:

obraz

Ulepszenie wyszukiwarki sklepów

Utworzyłeś solidne podstawy aplikacji do wyszukiwania sklepów. Teraz zastanów się, jak rozszerzyć jego funkcjonalność i stworzyć jeszcze bogatsze, bardziej skoncentrowane na użytkowniku środowisko.

Dodaj autouzupełnianie

Ułatwij użytkownikom znajdowanie obszarów, w których mogą szukać sklepów, integrując pole wyszukiwania z autouzupełnianiem miejsc. Gdy użytkownicy wpisują adres, nazwę dzielnicy lub punktu zainteresowania i wybierają sugestię, mapa automatycznie przesuwa się na tę lokalizację, co powoduje aktualizację informacji o sklepach w pobliżu. Aby to zrobić, dodaj pole tekstowe i dołącz do niego funkcję autouzupełniania miejsc. Po wybraniu sugestii mapa może zostać wyśrodkowana na tym punkcie. Pamiętaj, aby skonfigurować go tak, aby ograniczać wyniki do obszaru operacyjnego.

Wykrywanie lokalizacji

Oferowanie trafnych treści w chwili, gdy użytkownik otwiera aplikację, zwłaszcza na urządzeniach mobilnych, dzięki wdrożeniu funkcji wykrywania bieżącej lokalizacji geograficznej użytkownika. Po uzyskaniu zgody przeglądarki na wykrywanie lokalizacji automatycznie wyśrodkuj mapę na pozycji użytkownika i wyświetl najbliższe sklepy. Użytkownicy bardzo cenią sobie tę funkcję W pobliżu, gdy szukają natychmiastowych opcji. Dodaj przycisk lub początkowy prompt, aby poprosić o dostęp do lokalizacji.

Pokaż odległość i drogę dojazdu

Gdy użytkownik wybierze interesujący go sklep, możesz znacznie ulepszyć jego ścieżkę, integrując interfejs Routes API. Dla każdego sklepu oblicz i wyświetl odległość od bieżącej lokalizacji użytkownika lub od wyszukiwanej lokalizacji. Dodatkowo umieść przycisk lub link, który korzysta z interfejsu Routes API, aby wygenerować trasę z lokalizacji użytkownika do wybranego sklepu. Następnie możesz wyświetlić tę trasę na mapie lub połączyć ją z Mapami Google, aby ułatwić nawigację. Dzięki temu użytkownicy będą mogli bezproblemowo przejść od znalezienia sklepu do dotarcia do niego.

Dzięki wdrożeniu tych rozszerzeń możesz korzystać z większej liczby funkcji Google Maps Platform, aby tworzyć bardziej kompleksowe i wygodne wyszukiwarki sklepów, które bezpośrednio odpowiadają na typowe potrzeby użytkowników.

Podsumowanie

W tym przewodniku pokazaliśmy podstawowe kroki potrzebne do utworzenia interaktywnego wyszukiwarki sklepów. Poznaliśmy już, jak wyświetlać na mapie lokalizacje własnych sklepów za pomocą interfejsu Maps JavaScript API, jak dynamicznie aktualizować widoczne sklepy na podstawie zmian w obszarze widoku oraz jak wyświetlać własne dane o sklepie zgodnie z interfejsem Places UI Kit. Dzięki elementom z informacjami o miejscach, w tym z identyfikatorami miejsc, możesz prezentować bogate, ujednolicone informacje o każdej lokalizacji, tworząc solidną podstawę dla przyjaznego dla użytkownika wyszukiwarki sklepów.

Wypróbuj interfejs Maps JavaScript API i UI Kit Miejsca, aby oferować zaawansowane narzędzia oparte na komponentach, które pozwolą Ci szybko tworzyć zaawansowane aplikacje oparte na lokalizacji. Dzięki połączeniu tych funkcji możesz tworzyć angażujące i edukujące treści dla użytkowników.

Współtwórcy

Henrik Valve | DevX Inżynier