Google Maps Platform memungkinkan pelanggan mengembangkan pengalaman unik dengan menyesuaikan desain visual penanda peta mereka menggunakan Penanda Lanjutan. Dalam dokumen ini, kita akan mempelajari bagaimana pelanggan dapat selangkah lebih maju 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. Dalam beberapa kasus, informasi tambahan ini dapat berubah secara dinamis dan developer mungkin ingin visualisasi peta diperbarui, sehingga pengguna tetap mendapatkan informasi terbaru.
Dalam artikel ini, kami menggunakan contoh untuk tujuan ilustrasi: 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 beberapa ide tambahan:
- Ketersediaan Kamar Hotel: di peta yang menampilkan hasil penelusuran hotel, keaktualan ketersediaan kamar adalah sinyal penting yang dapat mendorong pengguna untuk melakukan reservasi hotel saat inventaris berkurang.
- Ketersediaan Tempat Parkir: pada peta tempat parkir, berikan keyakinan kepada pengguna untuk memilih tujuan yang akan memiliki tempat parkir saat mereka tiba.
- Restoran Buka, Segera Tutup, dan Tutup: di peta yang menampilkan hasil penelusuran restoran, penting bagi pengguna untuk mengetahui apakah restoran mungkin tutup ketika mereka tiba.
Solusi Penanda Lanjutan Dinamis
Sekarang, mari kita pelajari cara membuat peta menggunakan penanda lanjutan untuk memvisualisasikan data dinamis. Seperti yang disebutkan sebelumnya, kasus penggunaannya adalah jaringan toko retail yang memanfaatkan sistem pengelolaan antrean checkout untuk memperkirakan dan memvisualisasikan waktu tunggu bagi pengguna. Berikut adalah arsitektur aplikasinya:
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 menganotasi waktu tunggu secara visual pada penanda peta. Daftar atribut penanda tersedia siap pakai dalam spesifikasi PinElement. Anda juga dapat menggunakan HTML kustom untuk 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 untuk lebih dari 5 menit
- Konten penanda (memerlukan penanda HTML kustom): kita 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 kita meminta data waktu tunggu yang diperbarui 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. Kami juga menyertakan library Firebase di aplikasi web, sehingga kami dapat mengakses Cloud Function melalui permintaan HTTP.
Langkah berikutnya adalah memastikan data tetap baru bagi pengguna. Untuk melakukannya, kita menyiapkan timer menggunakan fungsi setInterval javascript dengan waktu tunggu 30 detik. Setiap kali timer dipicu, kami 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 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, 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, 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 pada tampilan peta
- Kemampuan hardware dan browser
Firebase Cloud Messaging
Firebase Cloud Messaging adalah pendekatan push. Dengan pendekatan ini, Anda akan mengirim update ke aplikasi peta setiap kali data waktu tunggu diperbarui di backend. Pesan pembaruan akan memicu fungsi callback yang tujuannya adalah memperbarui tampilan dan konten penanda.
Satu hal yang perlu dipertimbangkan sebelum memilih arsitektur ini adalah arsitektur ini memerlukan pemeliharaan koneksi server yang persisten untuk setiap browser yang menjalankan aplikasi peta. Karena alasan tersebut, pengoperasiannya mungkin lebih mahal, dan mungkin kurang andal dalam konteks masalah konektivitas.
WebSockets
WebSockets adalah pendekatan berbasis push lainnya untuk menjaga akurasi data. Serupa dengan skenario sebelumnya, Anda dapat menggunakan WebSocket untuk membuat koneksi persisten antara backend dan aplikasi peta. Manfaat fungsional dari pendekatan ini pada dasarnya mirip dengan Firebase Cloud Messaging, tetapi mungkin ada pekerjaan tambahan yang diperlukan untuk mengonfigurasi infrastruktur yang diperlukan.
Kesimpulan
Pengembang dapat mengombinasikan sumber data waktu nyata dengan Penanda Lanjutan 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 yang terintegrasi kemudian dapat digunakan untuk mengontrol tampilan dan nuansa Advanced Markers secara real time, sehingga memungkinkan pengalaman yang dinamis bagi pengguna.
Tindakan Berikutnya
Bacaan Lebih Lanjut:
- Advanced Markers - Google Developer Center
- 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 Google Cloud Platform
Steve Barrett | Engineer Solusi Google Maps Platform