Search code examples
javascriptgoogle-maps-api-3google-maps-markersmarkerclusterer

Googlemap API v3 - Can I get Content from Marker?


I created a lot of a Marker but I think after obtaining their content used to do average and set infowindow click inside is the average of all Marker on markerCluster.

Each Marker has to give him a value. snapshot

Snapshot


I want to grab all marker and average , and displayed in infowindow. Snapshot:

Snapshot

here is my Code:

var locations = [
 ['100', 22.75853,121.14886, 1],
 ['90', 22.7586,121.14891, 2],
 ['80', 22.75857,121.1488, 3],
 ['70', 22.75844,121.14887, 4],
 ['60', 25.08389,121.57796, 5],
 ['50', 22.75839,121.14891, 6],
 ['40', 22.75831,121.14912, 7],
 ['30', 22.75838,121.14904, 8],
 ['20', 22.75856,121.14867, 9],
 ['10', 25.08229,121.57822, 10]];
var mapOptions = {
center: new google.maps.LatLng(25.048215, 121.517123), 
zoom: 7 
};
 var map = new google.maps.Map(document.getElementById('map-   canvas'),mapOptions);
var infowindow = new google.maps.InfoWindow;
var markers=[];
for (var i = 0; i < locations.length; i++) {  
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
var marker = new google.maps.Marker({ position: latLng });
markers.push(marker);

google.maps.event.addListener(marker, 'click', (function(marker, i) {
     return function() {
         infowindow.setContent(locations[i][0]);
         infowindow.open(map, marker);
     }
})(marker, i));


}
var clusterOptions = { zoomOnClick: false };
var markerCluster = new MarkerClusterer(map, markers,clusterOptions);

google.maps.event.addListener(markerCluster, 'clusterclick',         function(cluster) {
var content = '';
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);

var allmarke = cluster.getMarkers();

var titles = "";

for(var i = 0; i < allmarke.length; i++) {
 titles = "put avage in here";
}                                        

infowindow.close();
infowindow.setContent(titles); 
infowindow.open(map, info);

});

Solution

    1. add a custom property to the marker containing its "value":
    for (var i = 0; i < locations.length; i++) {
      var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
      var marker = new google.maps.Marker({
        position: latLng,
        _myValue: locations[i][0]  // <-- custom property
      });
      markers.push(marker);
    
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    
    1. create the average of those values for display in the infowindow:
      var total = 0;
      for (var i = 0; i < allmarke.length; i++) {
        total += parseFloat(allmarke[i]._myValue);
      }
      titles = "avg " + (total / (allmarke.length)).toFixed(2);
    
      infowindow.close();
      infowindow.setContent(titles);
      infowindow.open(map, info);
    

    proof of concept fiddle

    code snippet:

    var locations = [
      ['100', 22.75853, 121.14886, 1],
      ['90', 22.7586, 121.14891, 2],
      ['80', 22.75857, 121.1488, 3],
      ['70', 22.75844, 121.14887, 4],
      ['60', 25.08389, 121.57796, 5],
      ['50', 22.75839, 121.14891, 6],
      ['40', 22.75831, 121.14912, 7],
      ['30', 22.75838, 121.14904, 8],
      ['20', 22.75856, 121.14867, 9],
      ['10', 25.08229, 121.57822, 10]
    ];
    var mapOptions = {
      center: new google.maps.LatLng(25.048215, 121.517123),
      zoom: 7
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var infowindow = new google.maps.InfoWindow;
    var markers = [];
    for (var i = 0; i < locations.length; i++) {
      var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
      var marker = new google.maps.Marker({
        position: latLng,
        _myValue: locations[i][0]
      });
      markers.push(marker);
    
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    
    var clusterOptions = {
      zoomOnClick: false,
      imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
    };
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    
    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
      var content = '';
      var info = new google.maps.MVCObject;
      info.set('position', cluster.center_);
    
      var allmarke = cluster.getMarkers();
    
      var titles = "";
    
      var total = 0;
      for (var i = 0; i < allmarke.length; i++) {
        total += parseFloat(allmarke[i]._myValue);
      }
      titles = "avg " + (total / (allmarke.length)).toFixed(2);
    
      infowindow.close();
      infowindow.setContent(titles);
      infowindow.open(map, info);
    
    });
    html,
    body,
    #map-canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>
    <div id="map-canvas"></div>