There are grouped labels on the map (Marker Cluster), you need to make sure that when you click on the labels inside them, an event will be triggered (Start function) to send the data taken to the application form in order to further send the request to the database. I can not understand how to make an event listener per click in this example.

function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: {lat: -28.024, lng: 140.887} }); var infoWindow = new google.maps.InfoWindow({map: map}); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infoWindow.setPosition(pos); infoWindow.setContent('Location found.'); map.setCenter(pos); }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { handleLocationError(false, infoWindow, map.getCenter()); } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.'); } var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var markers = locations.map(function(location, i) { return new google.maps.Marker({ position: location, label: labels[i % labels.length], title: 'Click to zoom' }); }); var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); } var locations = [ {lat: -31.563910, lng: 147.154312}, {lat: -33.718234, lng: 150.363181}, {lat: -33.727111, lng: 150.371124}, {lat: -33.848588, lng: 151.209834}, {lat: -33.851702, lng: 151.216968}, {lat: -34.671264, lng: 150.863657}, {lat: -35.304724, lng: 148.662905}, {lat: -36.817685, lng: 175.699196}, {lat: -36.828611, lng: 175.790222}, {lat: -37.750000, lng: 145.116667}, {lat: -37.759859, lng: 145.128708}, {lat: -37.765015, lng: 145.133858}, {lat: -37.770104, lng: 145.143299}, {lat: -37.773700, lng: 145.145187}, {lat: -37.774785, lng: 145.137978}, {lat: -37.819616, lng: 144.968119}, {lat: -38.330766, lng: 144.695692}, {lat: -39.927193, lng: 175.053218}, {lat: -41.330162, lng: 174.865694}, {lat: -42.734358, lng: 147.439506}, {lat: -42.734358, lng: 147.501315}, {lat: -42.735258, lng: 147.438000}, {lat: -43.999792, lng: 170.463352} ] function saveData() { var name = escape(document.getElementById("name").value); var address = escape(document.getElementById("address").value); var type = document.getElementById("type").value; var latlng = marker.getLatLng(); var lat = latlng.lat(); var lng = latlng.lng(); var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&type=" + type + "&lat=" + lat + "&lng=" + lng; GDownloadUrl(url, function(data, responseCode) { if (responseCode == 200 && data.length <= 1) { document.getElementById("message").innerHTML = "Данные добавлены."; } }); } 
 #map { width: 100%; height: 400px; padding: 0; margin: 0; position: relative; } 
  <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=AIzaSyAFejP9B-T5JwSNtNMjVKCUfjPD0TMTI2I&callback=initMap"> </script> <div id="map"></div>

  • Well, who knows? I have been day now, I can’t completely set up this thing: ( - Albert Ushakov

1 answer 1

If we are talking about markerCluster , then

 google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) { // your code here });
  • Not on the cluster itself but on the tags in it (Red). - Albert Ushakov