Google Maps Platform memungkinkan pelanggan mengembangkan pengalaman yang unik dengan menyesuaikan desain visual penanda peta menggunakan Penanda Lanjutan. Dalam dokumen ini, kita akan mempelajari bagaimana 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, warna, dan bentuk dapat menyampaikan informasi tambahan tentang setiap lokasi yang ditandai. Pada beberapa kasus, informasi tambahan ini dapat berubah secara dinamis dan pengembang mungkin ingin visualisasi peta diperbarui untuk menjaga keaktualan informasi bagi pengguna.
Dalam artikel ini, kami menggunakan contoh untuk tujuan ilustrasi: sebuah jaringan retail ingin menggunakan peta untuk menampilkan waktu tunggu toko kepada pengguna. Namun, arsitektur yang sama ini dapat digunakan untuk banyak kasus penggunaan lainnya. Berikut ini beberapa ide tambahan:
- Ketersediaan Kamar Hotel: pada peta yang menampilkan hasil penelusuran hotel, keaktualan ketersediaan kamar merupakan sinyal penting yang dapat mendorong pengguna untuk melakukan reservasi hotel saat inventaris berkurang.
- Ketersediaan Tempat Parkir: pada peta tempat parkir, berikan kepercayaan diri pengguna untuk memilih tujuan yang akan memiliki tempat parkir bagi mereka saat mereka tiba.
- Restoran Buka, Segera Tutup, dan Tutup: pada peta yang menampilkan hasil penelusuran restoran, penting bagi pengguna untuk mengetahui apakah restoran mungkin tutup saat mereka tiba.
Dynamic Advanced Markers Solution
Sekarang, mari kita pelajari pembuatan peta menggunakan penanda lanjutan untuk memvisualisasikan data dinamis. Seperti yang disebutkan sebelumnya, kasus penggunaannya adalah rantai toko retail yang memanfaatkan sistem pengelolaan antrean {i>check-out<i} untuk memperkirakan dan memvisualisasikan waktu tunggu bagi pengguna. Berikut ini arsitektur aplikasi:
Langkah 1 - Tentukan Atribut untuk Menentukan Pengalaman Visual
Langkah pertama adalah menentukan satu atau beberapa properti lokasi yang akan 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 secara visual tentang waktu tunggu pada penanda peta. Daftar atribut penanda tersedia secara langsung di spesifikasi PinElement. Anda juga dapat menggunakan HTML kustom untuk mendapatkan opsi penyesuaian yang lebih beragam.
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 selama lebih dari 5 menit
- Konten 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, yang meminta data waktu tunggu yang telah diupdate melalui permintaan HTTP (REST) secara berkala. Di bagian berikut, Anda akan melihat arsitektur alternatif yang memanfaatkan pendekatan push.
Agar aplikasi dapat mengakses data waktu tunggu dari server, arsitektur kami memanfaatkan Cloud Functions for Firebase. Cloud Functions memungkinkan kita menentukan fungsi backend untuk mengakses dan menghitung data ini. Kita juga menyertakan library Firebase dalam aplikasi web, sehingga dapat mengakses Cloud Function melalui permintaan HTTP.
Langkah berikutnya adalah memastikan kita selalu memperbarui data untuk pengguna. Untuk melakukannya, kami 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 merinci cara melakukan perubahan tersebut.
Langkah 3 - Render Penanda Peta
Sekarang kita dapat menggunakan Advanced Markers untuk merender penanda bergaya pada peta. Penanda lanjutan dapat dirender pada 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 ini, 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 ini membaca data waktu tunggu yang diperbarui dan menetapkan gaya visual 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 tersebut sekarang 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, kami meninjau dua opsi alternatif, Firebase Cloud Messaging dan Websockets. Apa pun pendekatan yang Anda pilih, pastikan untuk mempertimbangkan faktor-faktor di bawah ini agar alat peta Anda tetap berperforma tinggi:
- Frekuensi pembaruan
- 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 pembaruan ke aplikasi peta setiap kali data waktu tunggu diperbarui di backend. Pesan update akan memicu fungsi callback yang tujuannya adalah memperbarui tampilan dan konten penanda.
Satu hal yang perlu dipertimbangkan sebelum memilih arsitektur ini adalah bahwa arsitektur ini memerlukan koneksi server yang persisten untuk setiap browser yang menjalankan aplikasi peta. Oleh karena itu, cara ini mungkin lebih mahal untuk dijalankan, dan mungkin kurang kuat dalam konteks masalah konektivitas.
WebSockets
WebSockets adalah pendekatan berbasis push lainnya untuk menjaga data selalu terbaru. Serupa dengan skenario sebelumnya, Anda dapat menggunakan WebSockets untuk membuat koneksi persisten antara backend dan aplikasi peta Anda. Manfaat fungsional pendekatan ini mirip 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 Markers untuk membuat visualisasi yang 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 selanjutnya dapat digunakan untuk mengontrol tampilan dan nuansa Penanda Lanjutan secara real-time, yang memungkinkan pengalaman 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 | Engineer Solusi Google Maps Platform
John Branigan | Sr. Customer Engineer di Google Cloud Platform
Steve Barrett | Engineer Solusi Google Maps Platform