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 Detail Tempat. 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 Penanda Lanjutan 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 fitur pencari toko, yang menampilkan lokasi kantor Google di Bay Area. Elemen Detail Tempat ditampilkan untuk setiap lokasi, beserta beberapa contoh atribut.

Memuat dan Menampilkan Lokasi Toko

Di bagian ini, kita akan memuat dan menampilkan data toko Anda di peta. Panduan ini mengasumsikan bahwa Anda memiliki repositori informasi tentang toko yang sudah ada untuk diambil. Data toko Anda dapat berasal dari berbagai sumber, seperti database Anda. 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 (dipangkas). Ada juga dua nilai boolean untuk membantu mendeskripsikan 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 toko, dan membuat penanda berdasarkan lokasi masing-masing 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 menampilkan pin yang merepresentasikan lokasinya di peta, buat sidebar menggunakan HTML dan CSS untuk menampilkan detail tentang masing-masing toko Anda.

Contoh tampilan alat penemu lokasi toko Anda pada tahap ini adalah sebagai berikut:

gambar

Memproses Perubahan Area Pandang Peta

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

Lampirkan pemroses peristiwa ke peristiwa tidak ada aktivitas peta. Peristiwa ini dipicu setelah operasi menggeser atau memperbesar selesai, sehingga memberikan area tampilan yang stabil untuk perhitungan Anda.

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

Cuplikan kode di atas memproses peristiwa idle, dan memanggil fungsi debounce. Menggunakan fungsi debounce memastikan bahwa logika update penanda Anda hanya berjalan setelah pengguna berhenti berinteraksi dengan peta selama jangka waktu 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 penghilang pentalan. Fungsi ini mengambil argumen fungsi dan penundaan, yang dapat dilihat saat diteruskan di 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 detail toko di sidebar, jika lokasi toko berada dalam area tampilan peta.

Menampilkan detail tempat lengkap menggunakan Elemen Detail Tempat

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

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

Mengintegrasikan Elemen Ringkas Detail Tempat di aplikasi

Saat toko ditentukan berada dalam area peta saat ini dan 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 ID tersebut, dan ID ini ditambahkan ke PlaceDetailsCompactElement. Terakhir, gunakan PlaceContentConfigElement untuk mengonfigurasi konten yang akan ditampilkan elemen.

Fungsi berikut mengasumsikan bahwa library Place UI Kit yang diperlukan telah 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 contoh kode di atas, elemen dikonfigurasi untuk menampilkan foto tempat, rating ulasan, dan informasi aksesibilitas. Hal ini dapat disesuaikan dengan menambahkan atau menghapus elemen konten lain yang tersedia. Lihat dokumentasi PlaceContentConfigElement untuk semua opsi yang tersedia.

Elemen Ringkas Detail Tempat mendukung penataan gaya melalui properti kustom CSS. Hal ini memungkinkan Anda menyesuaikan tampilannya (warna, font, dll.) agar sesuai 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 kualitas fitur pencari toko

Anda telah membangun fondasi yang kokoh untuk aplikasi pencari lokasi toko. Sekarang, pertimbangkan beberapa cara untuk memperluas fungsinya dan menciptakan pengalaman yang lebih kaya dan 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 agar otomatis memusatkan lokasi tersebut, sehingga memicu pembaruan toko terdekat. Lakukan ini dengan menambahkan kolom input dan melampirkan fungsi Place Autocomplete ke kolom tersebut. Saat saran dipilih, peta dapat dipusatkan di titik tersebut. Jangan lupa mengonfigurasinya untuk memihak atau membatasi hasil ke area operasional Anda.

Mendeteksi lokasi

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

Menampilkan jarak dan rute

Setelah pengguna mengidentifikasi toko yang diminati, 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 Routes API untuk membuat rute dari lokasi pengguna ke toko yang dipilih. Kemudian, Anda dapat menampilkan rute ini di peta atau membuka link ke Google Maps untuk navigasi, sehingga menciptakan transisi yang lancar dari menemukan toko hingga benar-benar sampai ke sana.

Dengan menerapkan ekstensi ini, Anda dapat menggunakan lebih banyak kemampuan Google Maps Platform untuk membuat pencari lokasi toko yang lebih komprehensif dan nyaman yang secara 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 di peta menggunakan Maps JavaScript API, memperbarui toko yang terlihat secara dinamis berdasarkan perubahan area tampilan, dan yang paling penting, cara menampilkan data toko Anda sendiri sesuai dengan Places UI Kit. Dengan menggunakan informasi toko yang sudah ada, termasuk ID Tempat, dengan Elemen Detail Tempat, Anda dapat menyajikan 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 guna mengembangkan aplikasi berbasis lokasi yang canggih dengan cepat. Dengan menggabungkan fitur ini, Anda dapat menciptakan pengalaman yang menarik dan informatif bagi pengguna.

Kontributor

Henrik Valve | DevX Engineer