Marker Clusterer in Google Maps
HTML
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
CSS
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
var MrkId = 62440;
var markersC = [];
var markersA = [];
var infowindow;
var map;
var markerCluster;
var points = [
['Point 1', 'adresse 1 ', 46.613317, 2.249830, 62437],
['Point 2', 'adresse 2 ', 46.713317, 2.249830, 62438],
['Point 3', 'adresse 3 ', 46.613317, 2.349830, 62439],
['Point 4', 'adresse 4 ', 46.713317, 2.449830, 62440],
['Point 5', 'adresse 5 ', 46.613317, 2.449830, 62441],
['Point 1', 'adresse 1 ', 46.413317, 2.249830, 62442],
['Point 2', 'adresse 2 ', 46.513317, 2.249830, 62443],
['Point 3', 'adresse 3 ', 46.513317, 2.349830, 62444],
['Point 4', 'adresse 4 ', 46.413317, 2.449830, 62445],
['Point 5', 'adresse 5 ', 46.513317, 2.449830, 62446],
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 46.613317,
lng: 2.349830
},
zoom: 9
});
infowindow = new google.maps.InfoWindow();
setMarkers();
}
function MkrClick(Mrk, Cnt, point) {
var contentString = '<div class="marker-infowindow">' + '<h2>' + point[0] + '</h1>' + '<div><a target="_blank" href="https://tutoandco.colas-delmas.fr/developpement/inserer-carte-google-maps-wordpress/?utm_source=jsfiddle&utm_medium=website">Voir le tuto complet</a></div></div>';
Mrk.addListener('click', function() {
infowindow.setContent(Cnt);
infowindow.open(map, Mrk);
});
}
function setMarkers() {
console.log("setMarkers")
for (var i = 0; i < points.length; i++) {
var point = points[i];
var contentString = '<div class="marker-infowindow">' + '<h2>' + point[0] + '</h1>' + '<div><a target="_blank" href="https://tutoandco.colas-delmas.fr/developpement/inserer-carte-google-maps-wordpress/?utm_source=jsfiddle&utm_medium=website">Voir le tuto complet</a></div></div>';
var marker = new google.maps.Marker({
position: {
lat: point[2],
lng: point[3]
},
map: map,
title: point[0],
loc_id: point[4],
loc_txt: contentString,
});
...