Google Maps Platform memungkinkan pelanggan mengembangkan pengalaman unik dengan menyesuaikan desain visual penanda peta mereka menggunakan Penanda Lanjutan. Dalam dokumen ini, kita akan mempelajari cara pelanggan dapat melangkah lebih jauh dan membuat penanda yang berubah secara dinamis berdasarkan data real-time.
Penanda peta adalah alat yang berguna untuk memberikan pengalaman pemetaan yang kaya kepada pengguna. Atribut penanda seperti ukuran, pewarnaan, dan bentuk dapat menyampaikan informasi tambahan tentang setiap lokasi yang ditandai. Dalam beberapa kasus, informasi tambahan ini dapat berubah secara dinamis dan developer mungkin ingin visualisasi peta diperbarui, sehingga pengguna tetap merasa peta tersebut selalu baru.
Dalam dokumen ini, kami menggunakan contoh untuk tujuan ilustrasi: sebuah jaringan retail ingin menggunakan peta untuk menyediakan waktu tunggu di toko kepada pengguna. Namun, arsitektur yang sama ini dapat digunakan untuk banyak kasus penggunaan lainnya. Berikut beberapa ide tambahan:
- Ketersediaan Kamar Hotel: di peta yang menampilkan hasil penelusuran hotel, kesegaran ketersediaan kamar adalah sinyal penting yang dapat mendorong pengguna untuk melakukan reservasi hotel saat inventaris berkurang.
- Ketersediaan Tempat Parkir: di peta tempat parkir, berikan keyakinan kepada pengguna untuk memilih tujuan yang akan memiliki tempat bagi mereka saat mereka tiba.
- Restoran yang Buka, Segera Tutup, dan Tutup: di peta yang menampilkan hasil penelusuran restoran, penting bagi pengguna untuk mengetahui apakah restoran mungkin tutup saat mereka tiba.
Solusi Penanda Lanjutan Dinamis
Anda dapat membuat peta menggunakan penanda lanjutan untuk memvisualisasikan data dinamis. Seperti yang disebutkan sebelumnya, kasus penggunaan ini adalah jaringan toko retail yang memanfaatkan sistem pengelolaan antrean checkout untuk memperkirakan dan memvisualisasikan waktu tunggu bagi pengguna. Berikut arsitektur aplikasinya::
Langkah 1 - Tentukan Atribut untuk Menentukan Pengalaman Visual
Langkah pertama adalah menentukan satu atau beberapa properti lokasi untuk ditampilkan kepada pengguna. Dalam hal ini, kita hanya ingin menampilkan satu properti: waktu tunggu saat ini di setiap lokasi toko, yang diukur dalam menit.
Langkah berikutnya adalah memilih satu atau beberapa atribut penanda yang sesuai untuk memberikan anotasi visual pada waktu tunggu di penanda peta. Daftar atribut penanda tersedia langsung dalam spesifikasi PinElement. Anda juga dapat menggunakan HTML kustom untuk opsi penyesuaian yang lebih kaya.
Untuk contoh ini, kita akan menggunakan dua atribut penanda untuk memvisualisasikan data waktu tunggu:
- Warna penanda: biru untuk waktu tunggu kurang dari 5 menit, kuning untuk waktu tunggu lebih dari 5 menit
- Isi penanda (memerlukan penanda HTML kustom): kami akan menyertakan waktu tunggu saat ini dalam menit di penanda itu sendiri
Langkah 2 - Mengonfigurasi Koneksi ke Sumber Data Real-Time
Ada beberapa cara untuk terhubung ke sumber data, dan solusi yang tepat bergantung pada kasus penggunaan dan infrastruktur teknis Anda. Dalam contoh ini, kita menggunakan pendekatan pull, yaitu meminta data waktu tunggu yang diperbarui menggunakan permintaan HTTP (REST) secara rutin. Di bagian berikut, Anda akan melihat arsitektur alternatif yang memanfaatkan pendekatan push.
Untuk mengaktifkan aplikasi kita agar dapat mengakses data waktu tunggu dari server, arsitektur kita memanfaatkan Cloud Functions for Firebase. Cloud Functions memungkinkan kita menentukan fungsi backend untuk mengakses dan menghitung data ini. Kita juga menyertakan library Firebase di aplikasi web, sehingga kita dapat mengakses Cloud Function menggunakan permintaan HTTP.
Langkah selanjutnya adalah memastikan kita menjaga data tetap baru untuk pengguna. Untuk melakukannya, kita menyiapkan
timer menggunakan fungsi setInterval javascript dengan waktu tunggu 30
detik. Setiap kali timer dipicu, kami akan meminta data waktu tunggu yang diperbarui seperti yang dijelaskan di atas. Setelah mendapatkan data baru, kita harus memuat ulang tampilan penanda peta. Langkah berikutnya menjelaskan cara melakukan perubahan tersebut.
Langkah 3 - Merender Penanda Peta
Sekarang kita dapat menggunakan Penanda Lanjutan untuk merender penanda bergaya di peta. Penanda lanjutan dapat dirender di peta yang dibuat oleh Maps JavaScript API Google Maps Platform. Saat menggunakan penanda lanjutan, pastikan untuk menyertakan parameter ID peta dalam permintaan peta JS.
Dalam cuplikan kode yang ditampilkan di bawah, kita membuat penanda, dan menentukan konten penanda dengan membuat elemen div HTML:
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
Langkah terakhir adalah memperbarui teks penanda dan gaya CSS untuk setiap toko. Kode di bawah membaca data waktu tunggu yang diperbarui dan menetapkan gaya ke setiap pin toko berdasarkan waktu tunggu:
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
Peta kini menggunakan API waktu tunggu yang ada untuk memvisualisasikan waktu tunggu terbaru bagi pengguna:
Cara Alternatif untuk Terhubung ke Sumber Data Real-Time
Ada berbagai cara untuk terhubung ke sumber data real-time. Di bawah ini, kita akan meninjau dua opsi alternatif, yaitu Firebase Cloud Messaging dan Websocket. Apa pun pendekatan yang Anda pilih, pastikan untuk mempertimbangkan faktor-faktor di bawah ini agar alat peta Anda tetap berperforma baik:
- Frekuensi update
- Volume data
- Jumlah penanda dalam tampilan peta
- Kemampuan hardware dan browser
Firebase Cloud Messaging
Firebase Cloud Messaging adalah pendekatan push. Dengan menggunakan pendekatan ini, Anda akan mengirimkan update ke aplikasi peta setiap kali data waktu tunggu diperbarui di backend. Pesan pembaruan akan memicu fungsi callback yang tujuannya adalah memperbarui tampilan dan isi penanda.
Salah satu hal yang perlu dipertimbangkan sebelum memilih arsitektur ini adalah bahwa arsitektur ini memerlukan pemeliharaan koneksi server yang persisten untuk setiap browser yang menjalankan aplikasi peta. Oleh karena itu, menjalankan aplikasi ini mungkin lebih mahal, dan mungkin kurang andal dalam konteks masalah konektivitas.
WebSockets
WebSockets adalah pendekatan berbasis push lainnya untuk menjaga keaktualan data. Mirip dengan skenario sebelumnya, Anda dapat menggunakan WebSockets untuk membuat koneksi persisten antara backend dan aplikasi peta. Manfaat fungsional dari pendekatan ini serupa dengan Firebase Cloud Messaging, tetapi mungkin ada pekerjaan tambahan yang diperlukan untuk mengonfigurasi infrastruktur yang diperlukan.
Kesimpulan
Developer dapat menggabungkan sumber data real-time dengan Advanced Marker untuk membuat visualisasi intuitif di Google Maps. Ada beberapa cara untuk menghubungkan sumber data ini, bergantung pada persyaratan peta, hardware dan browser pengguna, serta volume data. Data terintegrasi kemudian dapat digunakan untuk mengontrol tampilan dan nuansa Penanda Lanjutan secara real-time, sehingga memungkinkan pengalaman yang dinamis bagi pengguna.
Tindakan Berikutnya
Bacaan Lebih Lanjut:
- Penanda Lanjutan - Pusat Developer Google
- Membuat Penanda dengan HTML Kustom
- Cloud Functions for Firebase
- Firebase Cloud Messaging
Kontributor
Penulis utama:
Jim Leflar | Google Maps Platform Solutions Engineer
John Branigan | Google Cloud Platform Sr. Customer Engineer
Steve Barrett | Google Maps Platform Solutions Engineer