Google Map Markers

With Marker Clustering - The cluster text is the total of marker extra.cnt

by Ben Clayton

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script src="//googlemaps.github.io/js-marker-clusterer//src/markerclusterer.js"></script>
100 Markers, with 1-10 coupons on each
<div id="map-canvas"></div>

CSS

#map-canvas {
    margin:30px;
    height: 400px;
    width: 400px;
}

JavaScript

function initialize() {
// Set up the map
    var lat=50.855;
    var lng=0.5786468;
    var center = new google.maps.LatLng(lat,lng);
    var el = document.getElementById("map-canvas");
    var options = {
      'zoom': 13,
      'center': center,
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(el, options);
 
// Setup Markers
	var infowindow = new google.maps.InfoWindow();// popup for marker
    var markers = [];
    for (var i = 0; i < 100; i++) {
        var latLng = new google.maps.LatLng(
            lat+((Math.random()-0.5)*.001),
            lng+((Math.random()-0.5)*.001)
        );
        var c = 1+parseInt(10*Math.random());
        var marker = new google.maps.Marker({
            'position': latLng,
            extra:{cnt:c,firstname:'Fred Fripper'+c,surname:'Smith',postcode:'TN345RT'},
            title:c+' coupons'}
        );
        markers.push(marker);
        
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
			    var txt = format_info(marker);
			    infowindow.setContent( txt );
			    infowindow.open(map, marker);
			}
        })(marker, i));
	
    }
// Setup Marker Clusterer
    var markerCluster = new MarkerClusterer(map, markers);

// Custom Calculator for Cluster text
    markerCluster.setCalculator(function(markers, numStyles) {
        var index = 0;
        var count = markers.length;
        var tot=0;
        for(var i=0;i<count;i++){
            tot+=markers[i].extra.cnt    
        }
        
        var dv = tot;
        while (dv !== 0) {
        dv = parseInt(dv / 10, 10);
            index++;
        }
        
        index = Math.min(index, numStyles);
        return {
            text: 'coupons:'+tot,
            index: index
        };
    });
}

google.maps.event.addDomListener(window, 'load', initialize);


function format_info(marker){
    var txt = '<b>Firstname</b>: '+marker.extra.firstname+'<br/>';
    txt +=...