Untuk membuat marker cluster pada Google Maps dengan objek polygon dan polyline, Anda dapat mengikuti langkah-langkah berikut. Di Google Maps API, MarkerClusterer digunakan untuk mengelompokkan marker, namun secara default, marker cluster bekerja dengan marker individu, bukan untuk polygon atau polyline. Jadi, pendekatan yang bisa diambil adalah dengan menambahkan marker di lokasi tertentu terkait dengan polygon atau polyline Anda dan menggunakan MarkerClusterer untuk mengelompokkan marker tersebut.
Berikut adalah cara untuk mengimplementasikannya:
1. Setup Dasar Google Maps dan MarkerClusterer
Pastikan Anda sudah mengimpor Google Maps API dan library MarkerClusterer.
<!DOCTYPE html>
<html>
<head>
<title>Marker Clustering with Polygon and Polyline</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<style>
#map {
height: 100%;
width: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Membuat peta
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: { lat: -6.200000, lng: 106.816666 },
});
// Menambahkan polyline
const polylinePath = new google.maps.Polyline({
path: [
{ lat: -6.2, lng: 106.8 },
{ lat: -6.1, lng: 107.0 },
{ lat: -6.3, lng: 107.2 }
],
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
polylinePath.setMap(map);
// Menambahkan polygon
const polygonPath = new google.maps.Polygon({
paths: [
{ lat: -6.5, lng: 106.7 },
{ lat: -6.4, lng: 106.9 },
{ lat: -6.3, lng: 106.7 },
],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
polygonPath.setMap(map);
// Membuat marker untuk polyline dan polygon
const markers = [
new google.maps.Marker({ position: { lat: -6.2, lng: 106.8 }, map: map }),
new google.maps.Marker({ position: { lat: -6.1, lng: 107.0 }, map: map }),
new google.maps.Marker({ position: { lat: -6.3, lng: 107.2 }, map: map }),
// Marker untuk polygon
new google.maps.Marker({ position: { lat: -6.5, lng: 106.7 }, map: map }),
new google.maps.Marker({ position: { lat: -6.4, lng: 106.9 }, map: map }),
new google.maps.Marker({ position: { lat: -6.3, lng: 106.7 }, map: map }),
];
// Menambahkan marker clusterer
const markerCluster = new MarkerClusterer(map, markers, {
imagePath:
"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
});
}
window.onload = initMap;
</script>
</body>
</html>
2.Penjelasan Kode:
+Polyline dan Polygon ditambahkan ke peta dengan Polyline dan Polygon constructor.
+Marker diletakkan pada titik-titik yang relevan di sepanjang polyline atau di dalam polygon.
+MarkerClusterer digunakan untuk mengelompokkan marker-marker yang ditempatkan di peta.
Selamat Mencoba 🙂
