Toggle MarkerClusterer

by Kamal Kumawat

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;amp;signed_in=true"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.1.2/src/markerclusterer.js"></script>
<div id="map-canvas"></div>
<form id="b2bmap">
    <label><input class="b2bfilter" type="checkbox" checked  id="1box" value="1">Sheffield</label>
        <label><input class="b2bfilter" type="checkbox" id="2box" checked value="2">Coventry</label>
        </form>

CSS

html, body, #map-canvas {
        height: 400px;
        margin: 0px;
        padding: 0px
      }

JavaScript

var points = [
{
  "name":"Sheff House",
  "lat":"53.341265600000",
  "lng":"-1.466105200000",
  "tid":"1"
},{
  "name":"Old house",
  "lat":"53.361066200000",
  "lng":"-1.465752700000",
  "tid":"1"
},
{
  "name":"For Sale",
  "lat":"52.405518600000",
  "lng":"-1.462621300000",
  "tid":"2"
},{
  "name":"Clovelly Road",
  "lat":"52.417593400000",
  "lng":"-1.470826200000",
  "tid":"2"
},{
  "name":"Queens House",
  "lat":"53.061115800000",
  "lng":"-2.533284200000",
  "tid":"4"
},{
  "name":"Slime street",
  "lat":"53.388223800000",
  "lng":"-1.503889500000",
  "tid":"1"
}];
var map;
var infowindow;
var image = [];
var gmarkers = [];
var clusterMarkers = [];


  function mapInit(){
    var centerCoord = new google.maps.LatLng(53.01265600000,-1.466105200000); 
    var mapOptions = {
        zoom: 6,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });


    addLocation();
    var markerCluster = new MarkerClusterer(map, clusterMarkers);


    function addLocation(place,category) {
      for (var x in points){
          var development = points[x];
          var location = new google.maps.LatLng(development.lat, development.lng);
          //addMarker(map, development, location);
          storeMarker(location, development);
      }   
    }


    function storeMarker(location, development){
      var latLng = location;
      var storedmarker = new google.maps.Marker({
            position: latLng
      });
      storedmarker.mycategory = development.tid;

      google.maps.event.addListener(storedmarker, 'click', function() {
        if(typeof infowindow != 'undefined') infowindow.close();
        infowindow = new google.maps.InfoWindow({
          content: "<h3>"+ development.name +"</h3><a href='http://www.bbc.co.uk'>Show more!</a>"
      });
       ...