map theme

map theme

<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, webeatMapTheme = 
[
  {
    "featureType": "poi",
    "stylers": [
      {{#if.hide_landmarks}},
      { visibility: "off" }
      {{/if.hide_landmarks}}
    ]
  },{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {{#if.hide_landmarks}},
      { visibility: "off" }
      {{/if.hide_landmarks}}
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "color": "{{color.transit_color}}" }
      {{#if.hide_roads}},
      { visibility: "off" }
      {{/if.hide_roads}}
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "color": "{{color.transit_color}}" }
      {{#if.hide_roads}},
      { visibility: "off" }
      {{/if.hide_roads}}
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "color": "{{color.land_color}}" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "color": "{{color.water_color}}" }
    ]
  },{
  }
]

    // event constructor
	function CalendarEvent(name, permalink, lat, lon, description, start_date, start_time, id, image){
  		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;
        this.image = image;
    }

	function pushFutureEvents(){
	  events = [];
      {{#future_events}}
         if (parseFloat({{latitude}}) && parseFloat({{longitude}})) {
          events.push(new CalendarEvent("{{name_escaped}}", "{{path}}", parseFloat({{latitude}}), parseFloat({{longitude}}), "{{description_escaped}}", "{{start_date_text}}", "{{start_time_text}}", "{{id}}", "{{image}}"));
         }
      {{/future_events}}
        if (!events.length){
        	pushPastEvents();
            document.getElementById("future").className = "";
            document.getElementById("past").className = "selected";
        }
     }
      
      function pushPastEvents() {
	    events = [];
	    {{#past_events}}
            if (parseFloat({{latitude}}) && parseFloat({{longitude}})) {
           events.push(new CalendarEvent("{{name_escaped}}", "{{path}}", parseFloat({{latitude}}), parseFloat({{longitude}}), "{{description_escaped}}", "{{start_date_text}}", "{{start_time_text}}", "{{id}}", "{{image}}"));
          }
	    {{/past_events}}
      }
       
         
    function indexViewContentString(event){
		var content = "<div style='max-width: 500px'>";
     	content += "<h2><a href='" + event.permalink + "'>";
        content += decodeURIComponent(event.name) + "</a></h2>";
	    content += "<p>" + event.start_date + " - ";
	    content += "<span data-id='" + event.id + "' class='recal' id='" + event.id + "'>recal</span></p>";
        content += "<img style='max-width:500px' src='" + event.image + "'></div>";
        return content;
    }         
              
    function singleViewContentString(event){
		var content = "<div style='max-width: 500px'>";
        content += "<h2>" + decodeURIComponent(event.name) + "</h2>";
	    content += "<img style='max-width:500px' src='" + event.image + "'/><p>";
        content += event.start_date + " at " + event.start_time + "</p>";
        content += "<p>" + decodeURIComponent(event.description) + "</p><br>";
        content += "<span data-id='" + event.id + "' class='recal' id='" + event.id + "'>recal</span></div>";
      	return content;     
    }
    window.onload = function() {      

      function initialize() {
        if (!events) {
        alert("sorry! there was not enough data about this event");
    	return;
      }
      
      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
    	      }
          },
          myLatlng = new google.maps.LatLng(0,0), 
          bounds = new google.maps.LatLngBounds(), 
          infowindow = new google.maps.InfoWindow(), 
          map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
          styledMap = new google.maps.StyledMapType(webeatMapTheme, {name: "Map Theme"}),
          marker, 
          markers = [],
          offsetMax = 1.000001,
          offsetMin = .999999,
          markerCluster = new MarkerClusterer(map, [], {
            'gridSize': 44,
            'maxZoom': 13,
            'zoomOnClick': true
          });

      // set style
      map.mapTypes.set("map_style", styledMap);
      map.setMapTypeId("map_style");


      for (i = 0; i < events.length; i++) {
        if (events[i].lat && events[i].lon) {
          
          var latLng = new google.maps.LatLng(events[i].lat, events[i].lon);
          var clusteredMarkers = markerCluster.getMarkers();

          if (clusteredMarkers.length){
            for(i=0; i < clusteredMarkers.length; i++){
				var existingMarker = clusteredMarkers[i];
                var pos = existingMarker.getPosition();
              
              if (latLng.equals(pos)){
	              var newLat = latLng.lat() * (Math.random() * (offsetMax - offsetMin) + offsetMin);
	              var newLng = latLng.lng() * (Math.random() * (offsetMax - offsetMin) + offsetMin);
				  latLng = new google.maps.LatLng(newLat, newLng);
              }
            }
          }
          
      		marker = new google.maps.Marker({
        		position: latLng,
	        	map: map,
                title: unescape(events[i].name)
   		     });
          markers.push(marker);
          markerCluster.addMarker(marker);

      	}
        if (events.length > 1) {
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(indexViewContentString(events[i]));                                    
              infowindow.open(map, marker);
              var timeout = setTimeout(function() { jQuery(window).trigger("recal:bind") }, 2000);
            }
          })(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()));
        
      if (events.length === 1) {
        infowindow.setContent(singleViewContentString(events[0]));
        infowindow.open(map,marker);
        infowindow.setMaxWidth = 200
        var timeout = setTimeout(function() { jQuery(window).trigger("recal:bind") }, 2000);
        google.maps.event.addListener(infowindow, 'closeclick', function(){          	
              window.location.href = "{{path}}"
        });
      }
    }

      var past = document.getElementById("past"), future = document.getElementById("future");
        
      past.addEventListener('click', function(e){
		if (this.className === "selected") return;
        e.preventDefault();
        pushPastEvents();
        initialize();
        this.className = "selected";
        future.className = "";
      }, false);

      future.addEventListener('click', function(e){
		if (this.className === "selected") return;
        e.preventDefault();
        pushFutureEvents();
        initialize();
        this.className = "selected";
        past.className = "";
      }, false);
      
      pushFutureEvents();
      console.log(events)
      initialize();
     }
</script>


<style>
  @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700,900);
  
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    color:{{color.font_color}};
    font-family: 'Source Code Pro', sans-serif;
  }

  #map_canvas {
    height: 100%;
  }
  h1{margin:0;}
  h1 a { text-decoration: none;margin:0}
  h2 a:hover, h1 a:hover { text-decoration: underline; } 
  h2{font-size:15px;}
  header p{margin:5px 0;}
  header { position: absolute; 
    width: auto; z-index: 2;background:rgba(255,255,255,0.9);
    padding:10px;
    overflow:hidden;
    border-bottom-right-radius: 48px;
    max-width:400px;
    
  }
  header { pointer-events:none; }
  header a { pointer-events: auto;color:{{color.link_color}} }
  header a:visited {color:{{color.link_color}}}
  .futurepast { float:right}
  .futurepast a { text-decoration:none; }
  .futurepast a:hover { text-decoration: line-through }
  .futurepast a.selected { text-decoration: line-through }
  .lastest-events{display:none}
</style>

<meta name="text:title" value="">
<meta name="text:sub_heading" value="">
<meta name="color:font_color" value="#000">
<meta name="color:link_color" value="#000">
<meta name="color:water_color" value="#f0e">
<meta name="color:land_color" value="#eee">
<meta name="color:transit_color" value="#eee">
<meta name="image:upload_logo" value="">
<meta name="if:hide_roads" value="false">
<meta name="if:hide_landmarks" value="false">

<body>
  <header>
    <h1><a href="{{path}}">{{text.title}}</a></h1>
    	{{#text.sub_heading}}
		<h2>{{text.sub_heading}}</h2>
		{{/text.sub_heading}}
		{{^text.sub_heading}}
		{{/text.sub_heading}}
          <div class="futurepast">
    <a href="#" class="selected" id="future">Future</a>
    <span>/</span>
    <a href="#" id="past">Past</a>
  </div>
     <h2 class="lastest-events">Lastest Events</h2>
    {{#future_events}}
    <style>
      .lastest-events{display:inline}
    </style>
    <p class="date">{{start_date_text}} {{start_time_text}}</p>
	<a href="{{path}}"class="event-name">{{name}}</a>
    {{/future_events}}
    {{^future_events}}
    {{/future_events}}

  </header>

      <div id="map_canvas"></div>
</body>