Hello to all. I connect Google map, on which several points are located, points are output, but I cannot do clustering. Nothing happens, there are no errors in the console. Here is the code:

var map; var markers = []; var indexMarkersHospital = []; var indexMarkersBanks = []; var indexMarkersStation = []; function addNewMarker(data) { var marker = new google.maps.Marker({ position: {lat: parseFloat(data['lat']), lng: parseFloat(data['lng'])}, map: map }); if(data['img']) { marker.setIcon(data['img']); } if(data['information']) { var information = new google.maps.InfoWindow({ content: data['information'] }); marker.addListener('click', function(){ information.open(map, marker); }); } switch (parseInt(data['type'], 10)) { case 1: indexMarkersHospital.push(markers.length); break; case 2: indexMarkersBanks.push(markers.length); break; case 3: indexMarkersStation.push(markers.length); break; } markers.push(marker); } function getMarkers(typeMarkers = []) { $.ajax({ method: "POST", url: "ajaxMarkers.php", data: { typeMarkers: typeMarkers } }) .done(function( data ) { var dataMarkers = JSON.parse(data); dataMarkers.forEach( function (el) { addNewMarker(el); }); }); } function setMapOnAll(map, typeMarkers) { switch (parseInt(typeMarkers, 10)) { case 1: indexMarkersHospital.forEach( function (el) { markers[el].setMap(map); }); break; case 2: indexMarkersBanks.forEach( function (el) { markers[el].setMap(map); }); break; case 3: indexMarkersStation.forEach( function (el) { markers[el].setMap(map); }); break; } } function initMap() { var element = document.getElementById('map'); var option = { zoom: 15, center: {lat: 49.84392946, lng: 24.02629763} } map = new google.maps.Map(element, option); var typeMarkers = [1, 2, 3]; //typeMarkers: 1 - Π»Ρ–ΠΊΠ°Ρ€Π½Ρ–, 2 - Π±Π°Π½ΠΊΠΈ, 3 - Π²ΠΎΠΊΠ·Π°Π»ΠΈ getMarkers(typeMarkers); $("input[name='marker']").on('click', function(event){ var el = event.target || event.srcElement; if(!$("form#markers input[value='"+el.value+"']").is(':checked')) { setMapOnAll(null, el.value);//скриваємо ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΈ } else { setMapOnAll(map, el.value);//Π²Ρ–Π΄ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ”ΠΌΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΈ } }); var mc = new MarkerClusterer(map); }

Library connected:

 <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> </script>

Help me please.

    1 answer 1

    Code redid, clustering works.

      var map; var globalMarkers = []; var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var indexMarkersHospital = []; var indexMarkersBanks = []; var indexMarkersStation = []; function setMapOnAll(map, typeMarkers) { switch (parseInt(typeMarkers, 10)) { case 1: indexMarkersHospital.forEach( function (el) { globalMarkers[el].setMap(map); }); break; case 2: indexMarkersBanks.forEach( function (el) { globalMarkers[el].setMap(map); }); break; case 3: indexMarkersStation.forEach( function (el) { globalMarkers[el].setMap(map); }); break; } } function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: {lat: 49.84392946, lng: 24.02629763} }); var typeMarkers = [1, 2, 3]; //typeMarkers: 1 - Π»Ρ–ΠΊΠ°Ρ€Π½Ρ–, 2 - Π±Π°Π½ΠΊΠΈ, 3 - Π²ΠΎΠΊΠ·Π°Π»ΠΈ $.ajax({ method: "POST", url: "ajaxMarkers.php", data: { typeMarkers: typeMarkers } }) .done(function( data ) { var dataMarkers = JSON.parse(data); var markers = dataMarkers.map(function(data, i) { var marker = new google.maps.Marker({ position: {lat: parseFloat(data['lat']), lng: parseFloat(data['lng'])}, label: labels[i % labels.length] }); if(data['img']) { marker.setIcon(data['img']); } if(data['information']) { var information = new google.maps.InfoWindow({ content: data['information'] }); marker.addListener('click', function(){ information.open(map, marker); }); } switch (parseInt(data['type'], 10)) { case 1: indexMarkersHospital.push(globalMarkers.length); break; case 2: indexMarkersBanks.push(globalMarkers.length); break; case 3: indexMarkersStation.push(globalMarkers.length); break; } globalMarkers.push(marker); return marker; }); var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); $("input[name='marker']").on('click', function(event){ var el = event.target || event.srcElement; if(!$("form#markers input[value='"+el.value+"']").is(':checked')) { setMapOnAll(null, el.value);//скриваємо ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΈ } else { setMapOnAll(map, el.value);//Π²Ρ–Π΄ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ”ΠΌΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΈ } }); }); }