Membuat Pencari Toko Interaktif dengan Kit UI Tempat

Tujuan

Dokumen ini menjelaskan langkah-langkah utama untuk mengembangkan aplikasi pencari toko interaktif menggunakan Google Maps Platform, khususnya Maps JavaScript API dan Kit UI Places: Elemen Place Details. Anda akan mempelajari cara membuat peta yang menampilkan lokasi toko, memperbarui daftar toko yang terlihat secara dinamis, dan menampilkan informasi tempat yang lengkap untuk setiap toko.

Prasyarat

Sebaiknya Anda memahami hal-hal berikut:

  • Maps JavaScript API - Digunakan untuk menampilkan peta di halaman Anda, dan untuk mengimpor Places UI Kit.
  • Penanda Lanjutan - Digunakan untuk menampilkan penanda di peta.
  • Kit UI Tempat - Digunakan untuk menampilkan informasi tentang toko Anda di UI.

Aktifkan Maps JavaScript API dan Places UI Kit di project Anda.

Pastikan Anda telah memuat Maps JavaScript API dan mengimpor library yang diperlukan untuk Advanced Markers dan Places UI Kit sebelum memulai. Dokumen ini juga mengasumsikan pengetahuan yang baik tentang pengembangan web, termasuk HTML, CSS, dan JavaScript.

Penyiapan awal

Langkah pertama adalah menambahkan peta ke halaman. Peta ini akan digunakan untuk menampilkan pin yang terkait dengan lokasi toko Anda.

Ada dua cara untuk menambahkan peta ke halaman:

  1. Menggunakan komponen web HTML gmp-map
  2. Menggunakan JavaScript

Pilih metode yang paling sesuai untuk kasus penggunaan Anda. Kedua cara penerapan peta akan berfungsi dengan panduan ini.

Demo

Demo ini menunjukkan contoh cara kerja pencari toko, yang menampilkan lokasi kantor Google di Bay Area. Elemen Place Details ditampilkan untuk setiap lokasi, bersama dengan beberapa contoh atribut.

Memuat dan Menampilkan Lokasi Toko

Di bagian ini, kami akan memuat dan menampilkan data toko Anda di peta. Panduan ini menganggap bahwa Anda memiliki repositori informasi tentang toko yang ada untuk diambil. Data toko Anda dapat berasal dari berbagai sumber, seperti database. Untuk contoh ini, kita mengasumsikan file JSON lokal (stores.json) dengan array objek toko, yang masing-masing mewakili satu lokasi toko. Setiap objek harus berisi setidaknya name, location (dengan lat dan lng), dan place_id.

Ada berbagai cara untuk mengambil ID Tempat untuk lokasi toko Anda jika Anda belum memilikinya. Lihat dokumentasi ID Tempat untuk mengetahui informasi selengkapnya.

Contoh entri detail toko dalam file stores.json Anda dapat terlihat seperti ini. Ada kolom untuk Nama, Lokasi (lat/lng), dan ID Tempat. Ada objek untuk menyimpan jam buka toko (terpotong). Ada juga dua nilai boolean untuk membantu menjelaskan fitur khusus lokasi toko.

{
  "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
}

Dalam kode JavaScript, ambil data untuk lokasi toko Anda, dan tampilkan pin di peta untuk setiap lokasi.

Contoh cara melakukannya adalah sebagai berikut. Fungsi ini mengambil objek yang berisi detail untuk toko, dan membuat penanda berdasarkan lokasi setiap toko.

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);
        }
    });
}

Setelah memuat toko dan memiliki pin yang mewakili lokasinya yang ditampilkan di peta, buat sidebar menggunakan HTML dan CSS untuk menampilkan detail tentang setiap toko Anda.

Contoh tampilan pencari toko Anda pada tahap ini adalah sebagai berikut:

gambar

Memproses Perubahan Area Pandang Peta

Untuk mengoptimalkan performa dan pengalaman pengguna, perbarui aplikasi Anda untuk menampilkan penanda dan detail di sidebar hanya jika lokasi yang sesuai berada dalam area peta yang terlihat (area pandang). Hal ini melibatkan pemrosesan perubahan area pandang peta, pembersihan peristiwa ini, lalu menggambar ulang hanya penanda yang diperlukan.

Lampirkan pemroses peristiwa ke peristiwa tidak ada aktivitas peta. Peristiwa ini dipicu setelah operasi geser atau zoom selesai, sehingga memberikan area pandang yang stabil untuk penghitungan Anda.

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

Cuplikan kode di atas memproses peristiwa idle, dan memanggil fungsi debounce. Menggunakan fungsi debounce akan memastikan bahwa logika pembaruan penanda Anda hanya berjalan setelah pengguna berhenti berinteraksi dengan peta selama periode singkat, sehingga meningkatkan performa.

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

Kode di atas adalah contoh fungsi debounce. Fungsi ini memerlukan argumen fungsi dan penundaan, yang dapat dilihat diteruskan dalam pemroses peristiwa tidak ada aktivitas. Penundaan 300 md sudah cukup untuk menunggu peta berhenti bergerak, tanpa menambahkan penundaan yang terlihat pada UI. Setelah waktu tunggu ini berakhir, fungsi yang diteruskan akan dipanggil, dalam hal ini, updateMarkersInView.

Fungsi updateMarkersInView harus melakukan tindakan berikut:

Menghapus semua penanda yang ada dari peta

Periksa apakah lokasi toko berada dalam batas peta saat ini, misalnya:

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

Dalam pernyataan if di atas, tulis kode untuk menampilkan penanda dan menyimpan detail di sidebar, jika lokasi toko berada dalam area pandang peta.

Menampilkan detail tempat yang lengkap menggunakan Elemen Place Details

Pada tahap ini, aplikasi menampilkan semua lokasi toko, dan pengguna dapat memfilternya berdasarkan area pandang peta. Untuk meningkatkan kualitasnya, detail lengkap tentang setiap toko, seperti foto, ulasan, dan informasi aksesibilitas, ditambahkan menggunakan Elemen Place Details. Contoh ini secara khusus menggunakan Elemen Ringkas Place Details.

Setiap lokasi toko di sumber data Anda harus memiliki ID Tempat yang sesuai. ID ini secara unik mengidentifikasi lokasi di Google Maps dan sangat penting untuk mengambil detailnya. Anda biasanya akan memperoleh ID Tempat ini terlebih dahulu, dan menyimpannya di setiap data toko Anda.

Mengintegrasikan Elemen Ringkas Place Details dalam aplikasi

Jika toko ditentukan berada dalam area pandang peta saat ini dan sedang dirender di sidebar, Anda dapat membuat dan menyisipkan Elemen Ringkas Detail Tempat secara dinamis untuk toko tersebut.

Untuk toko saat ini yang sedang diproses, ambil ID Tempat dari data Anda. ID Tempat digunakan untuk mengontrol tempat yang akan ditampilkan elemen.

Di JavaScript, buat instance PlaceDetailsCompactElement secara dinamis. PlaceDetailsPlaceRequestElement baru juga dibuat, ID Tempat diteruskan ke PlaceDetailsPlaceRequestElement, dan ini ditambahkan ke PlaceDetailsCompactElement. Terakhir, gunakan PlaceContentConfigElement untuk mengonfigurasi konten yang akan ditampilkan elemen.

Fungsi berikut mengasumsikan bahwa library Place UI Kit yang diperlukan diimpor dan tersedia dalam cakupan tempat fungsi ini dipanggil, dan storeData yang diteruskan ke fungsi berisi place_id.

Fungsi ini akan menampilkan elemen, dan kode panggilan akan bertanggung jawab untuk menambahkannya ke 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;
}

Dalam kode contoh di atas, elemen dikonfigurasi untuk menampilkan foto tempat, rating ulasan, dan informasi aksesibilitas. Ini dapat disesuaikan dengan menambahkan atau menghapus elemen konten lain yang tersedia, lihat dokumentasi PlaceContentConfigElement untuk semua opsi yang tersedia.

Elemen Ringkas Place Details mendukung gaya melalui properti kustom CSS. Hal ini memungkinkan Anda menyesuaikan tampilannya (warna, font, dll.) agar cocok dengan desain aplikasi Anda. Terapkan properti kustom ini dalam file CSS Anda. Lihat dokumentasi referensi untuk PlaceDetailsCompactElement untuk mengetahui properti CSS yang didukung.

Contoh tampilan aplikasi Anda pada tahap ini:

gambar

Meningkatkan pencari toko

Anda telah membuat fondasi yang kokoh untuk aplikasi pencari toko. Sekarang, pertimbangkan beberapa cara untuk memperluas fungsinya dan menciptakan pengalaman yang lebih kaya dan lebih berfokus pada pengguna.

Tambahkan Pelengkapan Otomatis

Tingkatkan cara pengguna menemukan area untuk menelusuri toko dengan mengintegrasikan input penelusuran dengan Place Autocomplete. Saat pengguna mengetik alamat, lingkungan, atau tempat menarik dan memilih saran, program peta untuk otomatis menempatkan lokasi tersebut di tengah, yang memicu pembaruan toko terdekat. Mencapainya dengan menambahkan kolom input dan melampirkan fungsi Place Autocomplete ke kolom tersebut. Saat memilih saran, peta dapat dipusatkan pada titik tersebut. Jangan lupa untuk mengonfigurasinya agar memiringkan atau membatasi hasil ke area operasional Anda.

Mendeteksi lokasi

Tawarkan relevansi langsung, terutama untuk pengguna seluler, dengan menerapkan fungsi untuk mendeteksi lokasi geografis mereka saat ini. Setelah mendapatkan izin browser untuk mendeteksi lokasinya, secara otomatis tempatkan peta di tengah posisinya dan tampilkan toko terdekat. Pengguna sangat menghargai fitur Di Sekitar Saya ini saat mencari opsi langsung. Tambahkan tombol atau perintah awal untuk meminta akses lokasi.

Menampilkan jarak dan rute

Setelah pengguna mengidentifikasi toko yang diinginkan, tingkatkan perjalanan mereka secara signifikan dengan mengintegrasikan Routes API. Untuk setiap toko yang Anda cantumkan, hitung dan tampilkan jarak dari lokasi pengguna saat ini, atau dari lokasi yang ditelusuri. Selain itu, sediakan tombol atau link yang menggunakan Route API untuk membuat rute dari lokasi pengguna ke toko yang dipilih. Kemudian, Anda dapat menampilkan rute ini di peta atau menautkan ke Google Maps untuk navigasi, sehingga menciptakan transisi yang lancar dari menemukan toko hingga benar-benar pergi ke sana.

Dengan menerapkan ekstensi ini, Anda dapat menggunakan lebih banyak kemampuan Google Maps Platform untuk membuat pencari toko yang lebih komprehensif dan praktis yang langsung memenuhi kebutuhan umum pengguna.

Kesimpulan

Panduan ini telah menunjukkan langkah-langkah inti untuk membuat pencari toko interaktif. Anda telah mempelajari cara menampilkan lokasi toko Anda sendiri pada peta menggunakan Maps JavaScript API, memperbarui toko yang terlihat secara dinamis berdasarkan perubahan area pandang, dan yang terpenting, cara menampilkan data toko Anda sendiri sesuai dengan Places UI Kit. Dengan menggunakan informasi toko yang ada, termasuk ID Tempat, dengan Elemen Place Details, Anda dapat menampilkan detail yang lengkap dan standar untuk setiap lokasi, sehingga menciptakan fondasi yang kuat untuk pencari toko yang mudah digunakan.

Coba Maps JavaScript API dan Places UI Kit untuk menawarkan alat berbasis komponen yang canggih untuk mengembangkan aplikasi berbasis lokasi yang canggih dengan cepat. Dengan menggabungkan fitur-fitur ini, Anda dapat menciptakan pengalaman yang menarik dan informatif bagi pengguna.

Kontributor

Henrik Valve | Engineer DevX