Google Map with zooming

by Ben Clayton

HTML

<base href="https://flowcms.infxsolutions.com" />

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://flowcms.infxsolutions.com/script/jQuery/highcharts-4.x/js/highcharts.src.js"></script>

<script src="https://flowcms.infxsolutions.com/script/google/map/dashboards/infx_google_map.js"></script>




<script src="https://flowcms.infxsolutions.com/script/google/map/v3/markerclusterer.js"></script>

<div id='map_div_6'>
</div>

JavaScript

var theme_6 = {
  "aspectRatio": 0.88,
  markerClustererCalculator: function(markers, numStyles) {
    var index = 0;
    var count = 0;
    markers.map(
      function(m) {
        count += parseInt(m.seriesData[2]);
      }
    );
    var dv = count;
    while (dv !== 0) {
      dv = parseInt(dv / 10, 10);
      index++;
    }
    index = Math.min(index, numStyles);
    return {
      text: count,
      index: index
    };
  },
  markerIcon: '/x_icons/google_maps/marker-orange.png',
  mapOptions: {
    zoom: 7,
    streetViewControl: false,
    center: {
      'Lat': 53.822,
      'Lng': -4
    }
  },
  mapStyles: [{
    "featureType": "administrative",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "landscape",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "poi",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "transit",
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "featureType": "administrative",
    "stylers": [{
      "visibility": "on"
    }]
  }, {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [{
      "color": "#85b100"
    }, {
      "visibility": "off"
    }]
  }, {
    "featureType": "water",
    "stylers": [{
      "color": "#eeeeee"
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "landscape",
    "stylers": [{
      "visibility": "on"
    }, {
      "color": "#cecdc7"
    }]
  }, {
    "featureType": "all",
    "stylers": [{
      "saturation": -80
    }]
  }, {
    "stylers": [{
      "hue": "#00ffe6"
    }, {
      "saturation": -20
    }]
  }, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{
      "lightness": 100
    }, {
      "visibility": "simplified"
    }]
  }, {
    "featureType": "road",
    "elementType": "labels",
    "stylers": [{
      "visibility": "off"
    }]
  }],
  markerStyles: {
    gridSize: 100,
    styles: [{
      url:...