Marker clustering pada Google Maps adalah teknik yang digunakan untuk mengelompokkan beberapa marker (penanda) yang berdekatan satu sama lain menjadi satu cluster atau kelompok. Hal ini sangat berguna ketika ada banyak marker di peta yang saling berdekatan, sehingga akan sulit bagi pengguna untuk melihat masing-masing marker secara jelas.
Untuk dapat membuat marker clustering, berikut langkah-langkahnya:
1. Menambahkan library google maps dan makercluster pada project anda :
*<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>*
<scriptsrc="https://unpkg.com/@googlemaps/markerclustererplus@1.2.10/dist/index.min.js"></script>
2. Lalu, kita membuat function initMap yang akan menambahkan marker dan menerapkan markerscluster kedalam map seperti, berikut :
<script>
function initMap() {
// Membuat peta
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -2.5489, lng: 118.0149} // Indonesia
});
// Lokasi marker
var locations = [
{lat: -6.2000, lng: 106.8167}, // Jakarta
{lat: -7.2504, lng: 112.7688}, // Surabaya
{lat: -6.9175, lng: 107.6191}, // Bandung
{lat: -5.147665, lng: 119.432732}, // Makassar
{lat: -0.7893, lng: 113.9213}, // Kalimantan
{lat: 1.48218, lng: 124.8484} // Manado
];
// Membuat marker berdasarkan lokasi
var markers = locations.map(function(location) {
return new google.maps.Marker({
position: location
});
});
// Menggunakan MarkerClusterer untuk mengelompokkan marker
var markerCluster = new MarkerClusterer(map, markers);
}
</script>
SELAMAT MENCOBA …. :-)
