Mengoptimalisasi Penampilan Objek Marker di Google Maps Agar Navigasi Peta Tetap Lancar

Bagi yang sering menggunakan dan menambahkan data di Google Maps mungkin pernah berpikir apa jadinya kalau kita menambahkan marker hingga ratusan di Google Maps, jawaban untuk pertanyaan ini adlah: Navigasi peta akan menjadi lambat. Silahkan coba web ini untuk melihat apa yang terjadi kalau kita menambahkan banyak marker, masukkan saja angka yang besar seperti 500 untuk jumlah marker yang ditambahkan.

Untuk menghindari hal ini terjadi maka perlu dilakukan optimalisasi dalam menampilkan objek marker di Google Maps. Ada beberapa cara agar navigasi peta tetap lancar walaupun kita menambahkan banyak marker, yang saya akan bahas adalah berikut ini:

Marker Manager

Google Maps API sebetulnya sudah menyediakan komponen Marker Manager yang berfungsi untuk mengoptimalisasi penampilan marker ketika kita menavigasikan peta namun ada banyak juga Marker Manager yang dibuat oleh orang lain yang lebih bagus (Google sendiri menyarankan menggunakan Marker Manager yang disediakan di web ini).

Dengan menggunakan komponen ini objek marker pada peta di Google Maps dapat diatur secara otomatis mana yang perlu ditampilkan dan mana yang tidak secara otomatis. Namun untuk optimalisasi proses penginputan data dari database  masih harus dibuat manual, karena jika kita memasukkan data berjumlah besar seperti 500 marker sekaligus akan membuat page load terlalu lama, namun navigasi peta tetap lancar karena telah diatur oleh Marker Manager.

Marker Clusterer

Seperti Marker Manager, Marker Clusterer bertugas untuk mengoptimalisasi data marker yang ditampilkan di peta Google Maps. Bedanya Marker Clusterer menggabungkan marker-marker menjadikan kelompok-kelompok berdasarkan jarak antara satu marker dengan marker lainnya. Berikut adalah tampilan ketika kita menggunakan Marker Clusterer untuk mengoptimalisasi penampilan marker:

Untuk mencoba penggunaan Marker Clusterer silahkan klik link ini.

——

Anda bisa memilih salah satu dari kedua metode di atas untuk mengoptimalisasi objek marker di Google Maps. Untuk source code dari kedua metode di atas anda bisa mendownloadnya di link ini. Source code dibuat menggunakan javascript sedangkan contoh penggunaannya menggunakan PHP. Source code yang saya sediakan merupakan modifikasi dari source code yang saya dapat diinternet agar lebih mudah digunakan. Sudah disediakan contoh penggunaannya di dalam file source code tersebut, anda cukup mengesktraknya di folder root web server PHP anda dan menjalankannya.