jgv/gist:3902117

## gistfile1.js
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

<script>
    var events = [];
    // event constructor
	function CalendarEvent(name, permalink, lat, lon, description, start_date, start_time, id){
  		this.name = name;
        this.permalink = permalink;
        this.lat = lat;
        this.lon = lon;
        this.description = description ? description : "";
        this.start_date = start_date;
        this.start_time = start_time;
        this.id = id;
    }

    {{#events}}
      events.push(new CalendarEvent("{{name_escaped}}", "{{path}}", (parseFloat({{latitude}}) || null), (parseFloat({{longitude}}) || null), "{{description_escaped}}", "{{start_date_text}}", "{{start_time_text}}", "{{id}}"));
    {{/events}}

  	function initialize() {
        var myLatlng = new google.maps.LatLng(0,0);
        var bounds = new google.maps.LatLngBounds();

        var mapOptions = {
          zoom: 3,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          disableDefaultUI: true,
          zoomControl: true,
          zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.LEFT_CENTER
          },
          streetViewControl: true,
          streetViewControlOptions: {
            position: google.maps.ControlPosition.LEFT_CENTER
          },
          scaleControl: true

        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

          // push all events into an array


      var infowindow = new google.maps.InfoWindow(), marker, markers = [];
      for (i = 0; i < events.length; i++) {
        if (events[i].lat && events[i].lon) {
      		marker = new google.maps.Marker({
        		position: new google.maps.LatLng(events[i].lat, events[i].lon),
	        	map: map,
                title: unescape(events[i].name)
   		     });
            markers.push(marker);

      	}
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent("<h2><a href='" + events[i].permalink + "'>" + unescape(events[i].name) + "</a></h2><p>" + events[i].start_date + "</p>");
            infowindow.open(map, marker);
            infowindow.maxWidth = 200;
          }
        })(marker, i));

        bounds.extend(new google.maps.LatLng(events[i].lat, events[i].lon));
        map.fitBounds(bounds);

      }
      var center = bounds.getCenter();
      map.panTo(new google.maps.LatLng(center.lat(), center.lng()));

      var markerCluster = new MarkerClusterer(map, markers, {
            'gridSize': 44,
            'maxZoom': 13,
            'zoomOnClick': true
      });


      if (events.length === 1) {
        infowindow.setContent("<h2>" + unescape(events[0].name) + "</h2><p>" + events[0].start_date + " at " + events[0].start_time + "</p><p>" + unescape(events[0].description) + "</p><br>" + "<span data-id='" + events[0].id + "' class='recal' id='" + events[0].id + "'>recal</span>");
        infowindow.open(map,marker);
      }
    }

</script>


<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }

  #map_canvas {
    height: 100%;
  }

  h2 { font-size: 20px }
  h2 a { text-decoration: none; color:black }
  h2 a:hover { text-decoration: underline; }
  h2 a:visited { color: black }

</style>

<meta name="text:title" value="">
<meta name="color:text_color" value="#333">
<meta name="image:background_image" value="">
<meta name="font:body_font" value="Menlo,monospace">
<meta name="if:stretch_background" value="false">

<body onload="initialize()">
      <div id="map_canvas"></div>
</body>
	<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>

	<script>
	var events = [];
	// event constructor
	function CalendarEvent(name, permalink, lat, lon, description, start_date, start_time, id){
	this.name = name;
	this.permalink = permalink;
	this.lat = lat;
	this.lon = lon;
	this.description = description ? description : "";
	this.start_date = start_date;
	this.start_time = start_time;
	this.id = id;
	}

	{{#events}}
	events.push(new CalendarEvent("{{name_escaped}}", "{{path}}", (parseFloat({{latitude}}) \|\| null), (parseFloat({{longitude}}) \|\| null), "{{description_escaped}}", "{{start_date_text}}", "{{start_time_text}}", "{{id}}"));
	{{/events}}

	function initialize() {
	var myLatlng = new google.maps.LatLng(0,0);
	var bounds = new google.maps.LatLngBounds();

	var mapOptions = {
	zoom: 3,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	disableDefaultUI: true,
	zoomControl: true,
	zoomControlOptions: {
	style: google.maps.ZoomControlStyle.SMALL,
	position: google.maps.ControlPosition.LEFT_CENTER
	},
	streetViewControl: true,
	streetViewControlOptions: {
	position: google.maps.ControlPosition.LEFT_CENTER
	},
	scaleControl: true

	}
	var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

	// push all events into an array


	var infowindow = new google.maps.InfoWindow(), marker, markers = [];
	for (i = 0; i < events.length; i++) {
	if (events[i].lat && events[i].lon) {
	marker = new google.maps.Marker({
	position: new google.maps.LatLng(events[i].lat, events[i].lon),
	map: map,
	title: unescape(events[i].name)
	});
	markers.push(marker);

	}
	google.maps.event.addListener(marker, 'click', (function(marker, i) {
	return function() {
	infowindow.setContent("<h2><a href='" + events[i].permalink + "'>" + unescape(events[i].name) + "</a></h2><p>" + events[i].start_date + "</p>");
	infowindow.open(map, marker);
	infowindow.maxWidth = 200;
	}
	})(marker, i));

	bounds.extend(new google.maps.LatLng(events[i].lat, events[i].lon));
	map.fitBounds(bounds);

	}
	var center = bounds.getCenter();
	map.panTo(new google.maps.LatLng(center.lat(), center.lng()));

	var markerCluster = new MarkerClusterer(map, markers, {
	'gridSize': 44,
	'maxZoom': 13,
	'zoomOnClick': true
	});


	if (events.length === 1) {
	infowindow.setContent("<h2>" + unescape(events[0].name) + "</h2><p>" + events[0].start_date + " at " + events[0].start_time + "</p><p>" + unescape(events[0].description) + "</p><br>" + "<span data-id='" + events[0].id + "' class='recal' id='" + events[0].id + "'>recal</span>");
	infowindow.open(map,marker);
	}
	}

	</script>


	<style>
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	}

	#map_canvas {
	height: 100%;
	}

	h2 { font-size: 20px }
	h2 a { text-decoration: none; color:black }
	h2 a:hover { text-decoration: underline; }
	h2 a:visited { color: black }

	</style>

	<meta name="text:title" value="">
	<meta name="color:text_color" value="#333">
	<meta name="image:background_image" value="">
	<meta name="font:body_font" value="Menlo,monospace">
	<meta name="if:stretch_background" value="false">

	<body onload="initialize()">
	<div id="map_canvas"></div>
	</body>