Added google maps api and stamen map tiles. Clean up config

The default map style is now Stamen Map's Toner. This can be changed in
the config either in the source or in the embed config object.

source/js/VMM.js

@@ -113,6 +113,15 @@ if (typeof VMM == 'undefined') {
 			que: []
 		},
 		
+		googlemaps: {
+			active: false,
+			map_active: false,
+			places_active: false,
+			array: [],
+			api_loaded:false,
+			que: []
+		}
+		
 	}).init();
 	
 	/* Abstract out DOM element creation to make independent of library
@@ -1301,7 +1310,7 @@ if (typeof VMM == 'undefined') {
 					mediaElem = "<img src='" + m.id + "'>";
 				} else if (m.type == "flickr") {
 					var flickr_id = "flickr_" + m.id;
-					mediaElem = "<img id='" + flickr_id + "_large" + "'>";
+					mediaElem = "<a href='" + m.link + "' target='_blank'><img id='" + flickr_id + "_large" + "'></a>";
 					VMM.ExternalAPI.flickr.getPhoto(m.id, "#" + flickr_id);
 				} else if (m.type == "googledoc") {
 					if (m.id.match(/docs.google.com/i)) {
@@ -1330,7 +1339,10 @@ if (typeof VMM == 'undefined') {
 					mediaElem = "<div class='media-frame soundcloud' id='" + soundcloud_id + "'>Loading Sound</div>";
 					VMM.ExternalAPI.soundcloud.getSound(m.id, soundcloud_id)
 				} else if (m.type == "google-map") {
-					mediaElem = "<iframe class='media-frame map' frameborder='0' width='100%' height='100%' scrolling='no' marginheight='0' marginwidth='0' src='" + m.id + "&amp;output=embed'></iframe>"
+					//mediaElem = "<iframe class='media-frame map' frameborder='0' width='100%' height='100%' scrolling='no' marginheight='0' marginwidth='0' src='" + m.id + "&amp;output=embed'></iframe>"
+					var map_id = "googlemap_" + VMM.Util.unique_ID(7);
+					mediaElem = "<div class='media-frame map' id='" + map_id + "'>Loading Map...</div>";
+					VMM.ExternalAPI.googlemaps.getMap(m.id, map_id);
 				} else if (m.type == "unknown") { 
 					trace("NO KNOWN MEDIA TYPE FOUND TRYING TO JUST PLACE THE HTML"); 
 					mediaElem = VMM.Util.properQuotes(m.id); 
@@ -1419,6 +1431,7 @@ if (typeof VMM == 'undefined') {
 			//media.id = d.split('/photos/[^/]+/([0-9]+)/gi');
 			
 			media.id = d.split("photos\/")[1].split("/")[1];
+			media.link = d;
 			//media.id = media.id.split("/")[1];
 			//trace("FLICKR " + media.id);
 			success = true;
@@ -1474,6 +1487,7 @@ if (typeof VMM == 'undefined') {
 	}
 	
 	VMM.Keys = {
+		// PLEASE REPLACE THESE WITH YOUR OWN API KEYS TO AVOID POSSIBLE OVERAGE BREAKS
 		flickr: "6d6f59d8d30d79f4f402a7644d5073e3",
 		google: "AIzaSyDUHXB8hefYssfwGpySnQmzTqL9n0qZ3T4"
 	}
@@ -1641,10 +1655,249 @@ if (typeof VMM == 'undefined') {
 			
 		},
 		
-		maps: {
+		//VMM.ExternalAPI.googlemaps.getMap()
+		googlemaps: {
+			/*
+				//http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9
+				
+				http://maps.google.com/maps?q=chicago&hl=en&sll=41.874961,-87.619054&sspn=0.159263,0.351906&t=t&hnear=Chicago,+Cook,+Illinois&z=11&output=kml
+				http://maps.google.com/maps/ms?msid=215143221704623082244.0004a53ad1e3365113a32&msa=0
+				http://maps.google.com/maps/ms?msid=215143221704623082244.0004a53ad1e3365113a32&msa=0&output=kml
+				http://maps.google.com/maps/ms?msid=215143221704623082244.0004a21354b1a2f188082&msa=0&ll=38.719738,-9.142599&spn=0.04172,0.087976&iwloc=0004a214c0e99e2da91e0
+				http://maps.google.com/maps?q=Bavaria&hl=en&ll=47.597829,9.398804&spn=1.010316,2.709503&sll=37.0625,-95.677068&sspn=73.579623,173.408203&hnear=Bavaria,+Germany&t=m&z=10&output=embed
+			*/
+			getMap: function(url, id) {
+				var map_vars = VMM.Util.getUrlVars(url);
+				trace(map_vars);
+				var map_url = "http://maps.googleapis.com/maps/api/js?key=" + VMM.Keys.google + "&libraries=places&sensor=false&callback=VMM.ExternalAPI.googlemaps.onMapAPIReady";
+				var map = {
+					url: url,
+					vars: map_vars,
+					id: id
+				}
+				
+				if (VMM.master_config.googlemaps.active) {
+					VMM.master_config.googlemaps.createMap(map);
+				} else {
+					
+					VMM.master_config.googlemaps.que.push(map);
+					
+					if (VMM.master_config.googlemaps.api_loaded) {
+						
+					} else {
+						
+						VMM.LoadLib.js(map_url, function() {
+							trace("Google Maps API Library Loaded");
+						});
+					}
+					
+				}
+				
+
+				
+			},
+			
+			onMapAPIReady: function() {
+				VMM.master_config.googlemaps.map_active = true;
+				VMM.master_config.googlemaps.places_active = true;
+				VMM.ExternalAPI.googlemaps.onAPIReady();
+			},
+			onPlacesAPIReady: function() {
+				VMM.master_config.googlemaps.places_active = true;
+				VMM.ExternalAPI.googlemaps.onAPIReady();
+			},
+			onAPIReady: function() {
+				if (!VMM.master_config.googlemaps.active) {
+					if (VMM.master_config.googlemaps.map_active && VMM.master_config.googlemaps.places_active) {
+						VMM.master_config.googlemaps.active = true;
+						for(var i = 0; i < VMM.master_config.googlemaps.que.length; i++) {
+							VMM.ExternalAPI.googlemaps.createMap(VMM.master_config.googlemaps.que[i]);
+						}
+					}
+				}
+			},
+			
+			stamen_map_attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
+			       'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
+			       'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, ' +
+			       'under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
+			
+			map_subdomains: ["", "a.", "b.", "c.", "d."],
+			
+			map_providers: {
+				"toner": {
+			        "url": "http://{S}tile.stamen.com/toner/{Z}/{X}/{Y}.png",
+			        "minZoom": 0,
+			        "maxZoom": 20
+			    },
+			    "toner-lines": {
+			        "url": "http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
+			        "minZoom": 0,
+			        "maxZoom": 20
+			    },
+			    "toner-labels": {
+			        "url": "http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
+			        "minZoom": 0,
+			        "maxZoom": 20
+			    },
+			    "sterrain": {
+			        "url": "http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
+			        "minZoom": 4,
+			        "maxZoom": 18
+			    },
+				"apple": {
+			        "url": "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9",
+			        "minZoom": 4,
+			        "maxZoom": 18
+			    },
+			    "watercolor": {
+			        "url": "http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
+			        "minZoom": 3,
+			        "maxZoom": 16
+			    }
+			},
+			
+			createMap: function(m) {
+				
+				/* 	MAP PROVIDERS
+					Including Stamen Maps
+					http://maps.stamen.com/
+					Except otherwise noted, each of these map tile sets are © Stamen Design, under a Creative Commons Attribution (CC BY 3.0) license.
+				================================================== */
+				function mapProvider(name) {
+					if (name in VMM.ExternalAPI.googlemaps.map_providers) {
+						return VMM.ExternalAPI.googlemaps.map_providers[name];
+					} else {
+						throw 'No such provider: "' + name + '"';
+					}
+				}
+				
+				google.maps.VeriteMapType = function(name) {
+					var provider = mapProvider(name);
+					return google.maps.ImageMapType.call(this, {
+						"getTileUrl": function(coord, zoom) {
+							var index = (zoom + coord.x + coord.y) % VMM.ExternalAPI.googlemaps.map_subdomains.length;
+							return [
+								provider.url
+									.replace("{S}", VMM.ExternalAPI.googlemaps.map_subdomains[index])
+									.replace("{Z}", zoom)
+									.replace("{X}", coord.x)
+									.replace("{Y}", coord.y)
+									.replace("{z}", zoom)
+									.replace("{x}", coord.x)
+									.replace("{y}", coord.y)
+							];
+						},
+						"tileSize": new google.maps.Size(256, 256),
+						"name":     name,
+						"minZoom":  provider.minZoom,
+						"maxZoom":  provider.maxZoom
+					});
+				};
+				
+				google.maps.VeriteMapType.prototype = new google.maps.ImageMapType("_");
+				
+				/* Make the Map
+				================================================== */
+				var layer;
+				
+				
+				if (type.of(VMM.master_config.Timeline.maptype) == "string") {
+					layer = VMM.master_config.Timeline.maptype;
+				} else {
+					layer = "toner";
+				}
+				
+				var location = new google.maps.LatLng(41.875696,-87.624207);
+				var latlong;
+				var zoom = 11;
+				var has_location = false;
+				var has_zoom = false;
+				var map_bounds;
+				
+				if (type.of(VMM.Util.getUrlVars(m.url)["ll"]) == "string") {
+					has_location = true;
+					latlong = VMM.Util.getUrlVars(m.url)["ll"].split(",");
+					location = new google.maps.LatLng(parseFloat(latlong[0]),parseFloat(latlong[1]));
+					
+				} else if (type.of(VMM.Util.getUrlVars(m.url)["sll"]) == "string") {
+					has_location = true;
+					latlong = VMM.Util.getUrlVars(m.url)["sll"].split(",");
+					location = new google.maps.LatLng(parseFloat(latlong[0]),parseFloat(latlong[1]));
+					
+				} 
+				
+				if (type.of(VMM.Util.getUrlVars(m.url)["z"]) == "string") {
+					has_zoom = true;
+					zoom = parseFloat(VMM.Util.getUrlVars(m.url)["z"]);
+				}
+				
+				var map_options = {
+					zoom:zoom,
+					disableDefaultUI: true,
+					mapTypeControl: false,
+					zoomControl: true,
+					zoomControlOptions: {
+						style: google.maps.ZoomControlStyle.SMALL,
+						position: google.maps.ControlPosition.TOP_RIGHT
+					},
+					center: location,
+					mapTypeId: layer,
+					mapTypeControlOptions: {
+				        mapTypeIds: [layer]
+				    }
+				}
+
+				var map = new google.maps.Map(document.getElementById(m.id), map_options);
+				map.mapTypes.set(layer, new google.maps.VeriteMapType(layer));
+				
+				loadKML();
+				
+				/* KML
+				================================================== */
+				function loadKML() {
+					var kml_url = m.url + "&output=kml";
+					kml_url = kml_url.replace("&output=embed", "");
+					
+					var kml_layer = new google.maps.KmlLayer(kml_url, {preserveViewport:true});
+					kml_layer.setMap(map);
+					
+					var infowindow = new google.maps.InfoWindow();
+
+					google.maps.event.addListenerOnce(kml_layer, "defaultviewport_changed", function() {
+						
+						
+						
+						if (has_location) {
+							map.panTo(location);
+						} 
+						
+						if (has_zoom) {
+							map.setZoom(zoom);
+						} else {
+							map.fitBounds(kml_layer.getDefaultViewport() );
+						}
+						
+						
+					});
+
+					google.maps.event.addListener(kml_layer, 'click', function(kmlEvent) {
+						var text = kmlEvent.featureData.description;
+						trace(kmlEvent.featureData.infoWindowHtml)
+						showInfoWindow(text);
+						function showInfoWindow(c) {
+							//trace("showInfoWindow")
+							infowindow.setContent(c);
+							infowindow.open(map);
+						}
+					});
+				}
+				
+			},
 			
 		},
 		
+		//VMM.ExternalAPI.flickr.getPhoto(mediaID, htmlID);
 		flickr: {
 			
 			getPhoto: function(mid, id) {
@@ -1652,7 +1905,7 @@ if (typeof VMM == 'undefined') {
 				var the_url = "http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=" + VMM.Keys.flickr + "&photo_id=" + mid + "&format=json&jsoncallback=?";
 				VMM.getJSON(the_url, VMM.ExternalAPI.flickr.setPhoto);
 			},
-			//VMM.ExternalAPI.flickr.setPhoto(d);
+			
 			setPhoto: function(d) {
 				var flickr_id = d.sizes.size[0].url.split("photos\/")[1].split("/")[1];
 				var id = "flickr_" + flickr_id;
@@ -1705,6 +1958,7 @@ if (typeof VMM == 'undefined') {
 			},
 			
 			onAPIReady: function() {
+				trace("YOUTUBE API READY")
 				VMM.master_config.youtube.active = true;
 				
 				for(var i = 0; i < VMM.master_config.youtube.que.length; i++) {
@@ -1729,7 +1983,7 @@ if (typeof VMM == 'undefined') {
 						showinfo:0,
 						theme: 'light',
 						rel:0,
-						origin:'http://dev.verite.co'
+						origin:'http://timeline.verite.co'
 					},
 					videoId: id,
 					events: {
@@ -1991,12 +2245,16 @@ var type={
 	}
 };
 
-/* YOUTUBE API
+/*  YOUTUBE API READY
+	Can't find a way to customize this callback and keep it in the VMM namespace
+	Youtube wants it to be this function. 
 ================================================== */
 function onYouTubePlayerAPIReady() {
+	trace("GLOBAL YOUTUBE API CALLED")
 	VMM.ExternalAPI.youtube.onAPIReady();
 }
 
+
 /*	jQuery Easing v1.3
 	http://gsgd.co.uk/sandbox/jquery/easing/
 ================================================== */
@@ -2036,4 +2294,3 @@ if( typeof( jQuery ) != 'undefined' ){
 }
 
 
-

source/js/timeline.js

@@ -1,7 +1,7 @@
 /*!
-	Verite Timeline 0.85
+	Verite Timeline 0.88
 	Designed and built by Zach Wise digitalartwork.net
-	Date: March 30, 2012
+	Date: April 8, 2012
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
@@ -26,7 +26,6 @@
 	-	Support feeds from popular sources
 	-	Storify integration
 	-	Code optimization
-	-	Clean up config flow
 	-	Possible tagging of events (depends on usability factors)
 	
 */
@@ -46,7 +45,11 @@
 
 if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 	
-	VMM.Timeline = function(w, h) {
+	
+	
+	VMM.Timeline = function(w, h, conf) {
+		var version = "0.88";
+		trace("OPEN TIMELINE VERSION " + version);
 		
 		var $timeline = VMM.getElement("#timeline"); // expecting name only for parent
 		var $feedback;
@@ -81,7 +84,16 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		
 		/* CONFIG
 		================================================== */
-		var config = {};
+		var config = VMM.Timeline.Config;
+		VMM.master_config.Timeline = VMM.Timeline.Config;
+		
+		/* 	MAP TYPE
+			options include 
+			Stamen Maps		"toner", "watercolor", "sterrain", "toner-lines", "toner-labels" 
+			Apple			"apple" 
+			Google			"HYBRID", "ROADMAP", "SATELLITE", "TERRAIN"
+		================================================== */
+		config.maptype = "toner";
 		config.interval = 10;
 		config.something = 0;
 		config.width = 960;
@@ -105,18 +117,36 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			config.height = VMM.Element.height($timeline);
 		}
 		
+		config.nav_width = config.width;
+		config.nav_height = 200;
+		config.feature_width = config.width;
+		
 		if (VMM.Browser.device == "mobile") {
-			config.nav_width = config.width;
-			config.nav_height = 200;
-			config.feature_width = config.width;
 			config.feature_height = config.height;
 		} else {
-			config.nav_width = config.width;
-			config.nav_height = 200;
-			config.feature_width = config.width;
 			config.feature_height = config.height - config.nav_height;
 		}
 		
+		/* APPLY SUPPLIED CONFIG TO TIMELINE CONFIG
+		================================================== */
+		
+		if (typeof timeline_config == 'object') {
+			trace("HAS TIMELINE CONFIG");
+		    var x;
+			for (x in timeline_config) {
+				if (Object.prototype.hasOwnProperty.call(timeline_config, x)) {
+					config[x] = timeline_config[x];
+				}
+			}
+		} else if (typeof conf == 'object') {
+			var x;
+			for (x in conf) {
+				if (Object.prototype.hasOwnProperty.call(conf, x)) {
+					config[x] = conf[x];
+				}
+			}
+		}
+		
 		/* CHECK FOR IE7
 		================================================== */
 		var ie7 = false;
@@ -126,12 +156,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			}
 		}
 		
-
-		
-		/* VER
-		================================================== */
-		this.ver = "0.85";
-		
 		
 		/* ON EVENT
 		================================================== */
@@ -632,32 +656,24 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			week: {}
 		};
 		
-		var config = {
+		/* ADD to Config
-			interval: 10,
+		================================================== */
-			something: 0,
+		var config = VMM.Timeline.Config;
-			width: 900,
+		config.something = 0;
-			height: 150,
+		config.nav_width = 100;
-			ease: "easeInOutExpo",
+		config.nav_height = 200;
-			duration: 1000,
+		config.timeline = false;
-			nav_width: 100,
+		config.marker_width = 150;
-			nav_height: 200,
+		config.marker_height = 48;
-			timeline: false,
+		config.density = 2;
-			spacing: 15,
+		config.timeline_width = 900;
-			marker_width: 150,
+		config.interval_width = 200;
-			marker_height: 48,
+		config.rows = [1, 1, 1];
-			density: 2,
+		config.multiplier = 6;
-			timeline_width: 900,
+		config.max_multiplier = 16;
-			interval_width: 200,
+		config.min_multiplier = 1;
-			rows: [1, 1, 1],
+		config.has_start_page = false;
-			multiplier: 6,
-			max_multiplier:16,
-			min_multiplier:1,
-			has_start_page:false,
-		};
-		 
-		
 		
-		//config.rows = [1, config.marker_height, config.marker_height*2];
 		config.rows = [config.marker_height, config.marker_height*2, 1];
 		
 		if (content_width != null && content_width != "") {
@@ -1735,7 +1751,9 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		
 	};
 	
-
+	VMM.Timeline.Config = {
+		
+	};
 	/* 	SOURCE DATA PROCESSOR
 	================================================== */
 	VMM.Timeline.DataObj = {

timeline.js

@@ -1,6 +1,6 @@
 /* Verite
  * Verite JS Master
- * Version: 0.6
+ * Version: 0.5
  * Date: April 5, 2012
  * Copyright 2012 Verite unless part of Verite Timeline, 
  * if part of Timeline then it inherits Timeline's license.
@@ -113,6 +113,15 @@ if (typeof VMM == 'undefined') {
 			que: []
 		},
 		
+		googlemaps: {
+			active: false,
+			map_active: false,
+			places_active: false,
+			array: [],
+			api_loaded:false,
+			que: []
+		}
+		
 	}).init();
 	
 	/* Abstract out DOM element creation to make independent of library
@@ -1301,7 +1310,7 @@ if (typeof VMM == 'undefined') {
 					mediaElem = "<img src='" + m.id + "'>";
 				} else if (m.type == "flickr") {
 					var flickr_id = "flickr_" + m.id;
-					mediaElem = "<img id='" + flickr_id + "_large" + "'>";
+					mediaElem = "<a href='" + m.link + "' target='_blank'><img id='" + flickr_id + "_large" + "'></a>";
 					VMM.ExternalAPI.flickr.getPhoto(m.id, "#" + flickr_id);
 				} else if (m.type == "googledoc") {
 					if (m.id.match(/docs.google.com/i)) {
@@ -1330,7 +1339,10 @@ if (typeof VMM == 'undefined') {
 					mediaElem = "<div class='media-frame soundcloud' id='" + soundcloud_id + "'>Loading Sound</div>";
 					VMM.ExternalAPI.soundcloud.getSound(m.id, soundcloud_id)
 				} else if (m.type == "google-map") {
-					mediaElem = "<iframe class='media-frame map' frameborder='0' width='100%' height='100%' scrolling='no' marginheight='0' marginwidth='0' src='" + m.id + "&amp;output=embed'></iframe>"
+					//mediaElem = "<iframe class='media-frame map' frameborder='0' width='100%' height='100%' scrolling='no' marginheight='0' marginwidth='0' src='" + m.id + "&amp;output=embed'></iframe>"
+					var map_id = "googlemap_" + VMM.Util.unique_ID(7);
+					mediaElem = "<div class='media-frame map' id='" + map_id + "'>Loading Map...</div>";
+					VMM.ExternalAPI.googlemaps.getMap(m.id, map_id);
 				} else if (m.type == "unknown") { 
 					trace("NO KNOWN MEDIA TYPE FOUND TRYING TO JUST PLACE THE HTML"); 
 					mediaElem = VMM.Util.properQuotes(m.id); 
@@ -1419,6 +1431,7 @@ if (typeof VMM == 'undefined') {
 			//media.id = d.split('/photos/[^/]+/([0-9]+)/gi');
 			
 			media.id = d.split("photos\/")[1].split("/")[1];
+			media.link = d;
 			//media.id = media.id.split("/")[1];
 			//trace("FLICKR " + media.id);
 			success = true;
@@ -1474,6 +1487,7 @@ if (typeof VMM == 'undefined') {
 	}
 	
 	VMM.Keys = {
+		// PLEASE REPLACE THESE WITH YOUR OWN API KEYS TO AVOID POSSIBLE OVERAGE BREAKS
 		flickr: "6d6f59d8d30d79f4f402a7644d5073e3",
 		google: "AIzaSyDUHXB8hefYssfwGpySnQmzTqL9n0qZ3T4"
 	}
@@ -1641,10 +1655,249 @@ if (typeof VMM == 'undefined') {
 			
 		},
 		
-		maps: {
+		//VMM.ExternalAPI.googlemaps.getMap()
+		googlemaps: {
+			/*
+				//http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9
+				
+				http://maps.google.com/maps?q=chicago&hl=en&sll=41.874961,-87.619054&sspn=0.159263,0.351906&t=t&hnear=Chicago,+Cook,+Illinois&z=11&output=kml
+				http://maps.google.com/maps/ms?msid=215143221704623082244.0004a53ad1e3365113a32&msa=0
+				http://maps.google.com/maps/ms?msid=215143221704623082244.0004a53ad1e3365113a32&msa=0&output=kml
+				http://maps.google.com/maps/ms?msid=215143221704623082244.0004a21354b1a2f188082&msa=0&ll=38.719738,-9.142599&spn=0.04172,0.087976&iwloc=0004a214c0e99e2da91e0
+				http://maps.google.com/maps?q=Bavaria&hl=en&ll=47.597829,9.398804&spn=1.010316,2.709503&sll=37.0625,-95.677068&sspn=73.579623,173.408203&hnear=Bavaria,+Germany&t=m&z=10&output=embed
+			*/
+			getMap: function(url, id) {
+				var map_vars = VMM.Util.getUrlVars(url);
+				trace(map_vars);
+				var map_url = "http://maps.googleapis.com/maps/api/js?key=" + VMM.Keys.google + "&libraries=places&sensor=false&callback=VMM.ExternalAPI.googlemaps.onMapAPIReady";
+				var map = {
+					url: url,
+					vars: map_vars,
+					id: id
+				}
+				
+				if (VMM.master_config.googlemaps.active) {
+					VMM.master_config.googlemaps.createMap(map);
+				} else {
+					
+					VMM.master_config.googlemaps.que.push(map);
+					
+					if (VMM.master_config.googlemaps.api_loaded) {
+						
+					} else {
+						
+						VMM.LoadLib.js(map_url, function() {
+							trace("Google Maps API Library Loaded");
+						});
+					}
+					
+				}
+				
+
+				
+			},
+			
+			onMapAPIReady: function() {
+				VMM.master_config.googlemaps.map_active = true;
+				VMM.master_config.googlemaps.places_active = true;
+				VMM.ExternalAPI.googlemaps.onAPIReady();
+			},
+			onPlacesAPIReady: function() {
+				VMM.master_config.googlemaps.places_active = true;
+				VMM.ExternalAPI.googlemaps.onAPIReady();
+			},
+			onAPIReady: function() {
+				if (!VMM.master_config.googlemaps.active) {
+					if (VMM.master_config.googlemaps.map_active && VMM.master_config.googlemaps.places_active) {
+						VMM.master_config.googlemaps.active = true;
+						for(var i = 0; i < VMM.master_config.googlemaps.que.length; i++) {
+							VMM.ExternalAPI.googlemaps.createMap(VMM.master_config.googlemaps.que[i]);
+						}
+					}
+				}
+			},
+			
+			stamen_map_attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
+			       'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
+			       'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, ' +
+			       'under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
+			
+			map_subdomains: ["", "a.", "b.", "c.", "d."],
+			
+			map_providers: {
+				"toner": {
+			        "url": "http://{S}tile.stamen.com/toner/{Z}/{X}/{Y}.png",
+			        "minZoom": 0,
+			        "maxZoom": 20
+			    },
+			    "toner-lines": {
+			        "url": "http://{S}tile.stamen.com/toner-lines/{Z}/{X}/{Y}.png",
+			        "minZoom": 0,
+			        "maxZoom": 20
+			    },
+			    "toner-labels": {
+			        "url": "http://{S}tile.stamen.com/toner-labels/{Z}/{X}/{Y}.png",
+			        "minZoom": 0,
+			        "maxZoom": 20
+			    },
+			    "sterrain": {
+			        "url": "http://{S}tile.stamen.com/terrain/{Z}/{X}/{Y}.jpg",
+			        "minZoom": 4,
+			        "maxZoom": 18
+			    },
+				"apple": {
+			        "url": "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_US&z={z}&x={x}&y={y}&v=9",
+			        "minZoom": 4,
+			        "maxZoom": 18
+			    },
+			    "watercolor": {
+			        "url": "http://{S}tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg",
+			        "minZoom": 3,
+			        "maxZoom": 16
+			    }
+			},
+			
+			createMap: function(m) {
+				
+				/* 	MAP PROVIDERS
+					Including Stamen Maps
+					http://maps.stamen.com/
+					Except otherwise noted, each of these map tile sets are © Stamen Design, under a Creative Commons Attribution (CC BY 3.0) license.
+				================================================== */
+				function mapProvider(name) {
+					if (name in VMM.ExternalAPI.googlemaps.map_providers) {
+						return VMM.ExternalAPI.googlemaps.map_providers[name];
+					} else {
+						throw 'No such provider: "' + name + '"';
+					}
+				}
+				
+				google.maps.VeriteMapType = function(name) {
+					var provider = mapProvider(name);
+					return google.maps.ImageMapType.call(this, {
+						"getTileUrl": function(coord, zoom) {
+							var index = (zoom + coord.x + coord.y) % VMM.ExternalAPI.googlemaps.map_subdomains.length;
+							return [
+								provider.url
+									.replace("{S}", VMM.ExternalAPI.googlemaps.map_subdomains[index])
+									.replace("{Z}", zoom)
+									.replace("{X}", coord.x)
+									.replace("{Y}", coord.y)
+									.replace("{z}", zoom)
+									.replace("{x}", coord.x)
+									.replace("{y}", coord.y)
+							];
+						},
+						"tileSize": new google.maps.Size(256, 256),
+						"name":     name,
+						"minZoom":  provider.minZoom,
+						"maxZoom":  provider.maxZoom
+					});
+				};
+				
+				google.maps.VeriteMapType.prototype = new google.maps.ImageMapType("_");
+				
+				/* Make the Map
+				================================================== */
+				var layer;
+				
+				
+				if (type.of(VMM.master_config.Timeline.maptype) == "string") {
+					layer = VMM.master_config.Timeline.maptype;
+				} else {
+					layer = "toner";
+				}
+				
+				var location = new google.maps.LatLng(41.875696,-87.624207);
+				var latlong;
+				var zoom = 11;
+				var has_location = false;
+				var has_zoom = false;
+				var map_bounds;
+				
+				if (type.of(VMM.Util.getUrlVars(m.url)["ll"]) == "string") {
+					has_location = true;
+					latlong = VMM.Util.getUrlVars(m.url)["ll"].split(",");
+					location = new google.maps.LatLng(parseFloat(latlong[0]),parseFloat(latlong[1]));
+					
+				} else if (type.of(VMM.Util.getUrlVars(m.url)["sll"]) == "string") {
+					has_location = true;
+					latlong = VMM.Util.getUrlVars(m.url)["sll"].split(",");
+					location = new google.maps.LatLng(parseFloat(latlong[0]),parseFloat(latlong[1]));
+					
+				} 
+				
+				if (type.of(VMM.Util.getUrlVars(m.url)["z"]) == "string") {
+					has_zoom = true;
+					zoom = parseFloat(VMM.Util.getUrlVars(m.url)["z"]);
+				}
+				
+				var map_options = {
+					zoom:zoom,
+					disableDefaultUI: true,
+					mapTypeControl: false,
+					zoomControl: true,
+					zoomControlOptions: {
+						style: google.maps.ZoomControlStyle.SMALL,
+						position: google.maps.ControlPosition.TOP_RIGHT
+					},
+					center: location,
+					mapTypeId: layer,
+					mapTypeControlOptions: {
+				        mapTypeIds: [layer]
+				    }
+				}
+
+				var map = new google.maps.Map(document.getElementById(m.id), map_options);
+				map.mapTypes.set(layer, new google.maps.VeriteMapType(layer));
+				
+				loadKML();
+				
+				/* KML
+				================================================== */
+				function loadKML() {
+					var kml_url = m.url + "&output=kml";
+					kml_url = kml_url.replace("&output=embed", "");
+					
+					var kml_layer = new google.maps.KmlLayer(kml_url, {preserveViewport:true});
+					kml_layer.setMap(map);
+					
+					var infowindow = new google.maps.InfoWindow();
+
+					google.maps.event.addListenerOnce(kml_layer, "defaultviewport_changed", function() {
+						
+						
+						
+						if (has_location) {
+							map.panTo(location);
+						} 
+						
+						if (has_zoom) {
+							map.setZoom(zoom);
+						} else {
+							map.fitBounds(kml_layer.getDefaultViewport() );
+						}
+						
+						
+					});
+
+					google.maps.event.addListener(kml_layer, 'click', function(kmlEvent) {
+						var text = kmlEvent.featureData.description;
+						trace(kmlEvent.featureData.infoWindowHtml)
+						showInfoWindow(text);
+						function showInfoWindow(c) {
+							//trace("showInfoWindow")
+							infowindow.setContent(c);
+							infowindow.open(map);
+						}
+					});
+				}
+				
+			},
 			
 		},
 		
+		//VMM.ExternalAPI.flickr.getPhoto(mediaID, htmlID);
 		flickr: {
 			
 			getPhoto: function(mid, id) {
@@ -1652,7 +1905,7 @@ if (typeof VMM == 'undefined') {
 				var the_url = "http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=" + VMM.Keys.flickr + "&photo_id=" + mid + "&format=json&jsoncallback=?";
 				VMM.getJSON(the_url, VMM.ExternalAPI.flickr.setPhoto);
 			},
-			//VMM.ExternalAPI.flickr.setPhoto(d);
+			
 			setPhoto: function(d) {
 				var flickr_id = d.sizes.size[0].url.split("photos\/")[1].split("/")[1];
 				var id = "flickr_" + flickr_id;
@@ -1705,6 +1958,7 @@ if (typeof VMM == 'undefined') {
 			},
 			
 			onAPIReady: function() {
+				trace("YOUTUBE API READY")
 				VMM.master_config.youtube.active = true;
 				
 				for(var i = 0; i < VMM.master_config.youtube.que.length; i++) {
@@ -1729,7 +1983,7 @@ if (typeof VMM == 'undefined') {
 						showinfo:0,
 						theme: 'light',
 						rel:0,
-						origin:'http://dev.verite.co'
+						origin:'http://timeline.verite.co'
 					},
 					videoId: id,
 					events: {
@@ -1991,12 +2245,16 @@ var type={
 	}
 };
 
-/* YOUTUBE API
+/*  YOUTUBE API READY
+	Can't find a way to customize this callback and keep it in the VMM namespace
+	Youtube wants it to be this function. 
 ================================================== */
 function onYouTubePlayerAPIReady() {
+	trace("GLOBAL YOUTUBE API CALLED")
 	VMM.ExternalAPI.youtube.onAPIReady();
 }
 
+
 /*	jQuery Easing v1.3
 	http://gsgd.co.uk/sandbox/jquery/easing/
 ================================================== */
@@ -2038,7 +2296,6 @@ if( typeof( jQuery ) != 'undefined' ){
 
 
 
-
 /*********************************************** 
      Begin VMM.Core.js 
 ***********************************************/ 
@@ -3049,7 +3306,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') {
 		/* Get URL Variables
 		================================================== */
 		//	var somestring = VMM.Util.getUrlVars(str_url)["varname"];
-		getUrlVars: function(str) {
+		getUrlVars: function(string) {
+			
+			var str = string.toString();
+			
 			var vars = [], hash;
 			var hashes = str.slice(str.indexOf('?') + 1).split('&');
 			for(var i = 0; i < hashes.length; i++) {
@@ -3057,10 +3317,10 @@ if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') {
 				vars.push(hash[0]);
 				vars[hash[0]] = hash[1];
 			}
-			trace(vars);
+			
 			return vars;
 		},
-		
+
 		/* Cleans up strings to become real HTML
 		================================================== */
 		toHTML: function(text) {
@@ -3724,9 +3984,9 @@ if(typeof VMM != 'undefined' && typeof VMM.LoadLib == 'undefined') {
 ***********************************************/ 
 
 /*!
-	Verite Timeline 0.85
+	Verite Timeline 0.88
 	Designed and built by Zach Wise digitalartwork.net
-	Date: March 30, 2012
+	Date: April 8, 2012
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
@@ -3751,7 +4011,6 @@ if(typeof VMM != 'undefined' && typeof VMM.LoadLib == 'undefined') {
 	-	Support feeds from popular sources
 	-	Storify integration
 	-	Code optimization
-	-	Clean up config flow
 	-	Possible tagging of events (depends on usability factors)
 	
 */
@@ -3771,7 +4030,11 @@ if(typeof VMM != 'undefined' && typeof VMM.LoadLib == 'undefined') {
 
 if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 	
-	VMM.Timeline = function(w, h) {
+	
+	
+	VMM.Timeline = function(w, h, conf) {
+		var version = "0.88";
+		trace("OPEN TIMELINE VERSION " + version);
 		
 		var $timeline = VMM.getElement("#timeline"); // expecting name only for parent
 		var $feedback;
@@ -3806,7 +4069,16 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		
 		/* CONFIG
 		================================================== */
-		var config = {};
+		var config = VMM.Timeline.Config;
+		VMM.master_config.Timeline = VMM.Timeline.Config;
+		
+		/* 	MAP TYPE
+			options include 
+			Stamen Maps		"toner", "watercolor", "sterrain", "toner-lines", "toner-labels" 
+			Apple			"apple" 
+			Google			"HYBRID", "ROADMAP", "SATELLITE", "TERRAIN"
+		================================================== */
+		config.maptype = "toner";
 		config.interval = 10;
 		config.something = 0;
 		config.width = 960;
@@ -3830,18 +4102,36 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			config.height = VMM.Element.height($timeline);
 		}
 		
+		config.nav_width = config.width;
+		config.nav_height = 200;
+		config.feature_width = config.width;
+		
 		if (VMM.Browser.device == "mobile") {
-			config.nav_width = config.width;
-			config.nav_height = 200;
-			config.feature_width = config.width;
 			config.feature_height = config.height;
 		} else {
-			config.nav_width = config.width;
-			config.nav_height = 200;
-			config.feature_width = config.width;
 			config.feature_height = config.height - config.nav_height;
 		}
 		
+		/* APPLY SUPPLIED CONFIG TO TIMELINE CONFIG
+		================================================== */
+		
+		if (typeof timeline_config == 'object') {
+			trace("HAS TIMELINE CONFIG");
+		    var x;
+			for (x in timeline_config) {
+				if (Object.prototype.hasOwnProperty.call(timeline_config, x)) {
+					config[x] = timeline_config[x];
+				}
+			}
+		} else if (typeof conf == 'object') {
+			var x;
+			for (x in conf) {
+				if (Object.prototype.hasOwnProperty.call(conf, x)) {
+					config[x] = conf[x];
+				}
+			}
+		}
+		
 		/* CHECK FOR IE7
 		================================================== */
 		var ie7 = false;
@@ -3851,12 +4141,6 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			}
 		}
 		
-
-		
-		/* VER
-		================================================== */
-		this.ver = "0.85";
-		
 		
 		/* ON EVENT
 		================================================== */
@@ -4357,32 +4641,24 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 			week: {}
 		};
 		
-		var config = {
+		/* ADD to Config
-			interval: 10,
+		================================================== */
-			something: 0,
+		var config = VMM.Timeline.Config;
-			width: 900,
+		config.something = 0;
-			height: 150,
+		config.nav_width = 100;
-			ease: "easeInOutExpo",
+		config.nav_height = 200;
-			duration: 1000,
+		config.timeline = false;
-			nav_width: 100,
+		config.marker_width = 150;
-			nav_height: 200,
+		config.marker_height = 48;
-			timeline: false,
+		config.density = 2;
-			spacing: 15,
+		config.timeline_width = 900;
-			marker_width: 150,
+		config.interval_width = 200;
-			marker_height: 48,
+		config.rows = [1, 1, 1];
-			density: 2,
+		config.multiplier = 6;
-			timeline_width: 900,
+		config.max_multiplier = 16;
-			interval_width: 200,
+		config.min_multiplier = 1;
-			rows: [1, 1, 1],
+		config.has_start_page = false;
-			multiplier: 6,
-			max_multiplier:16,
-			min_multiplier:1,
-			has_start_page:false,
-		};
-		 
-		
 		
-		//config.rows = [1, config.marker_height, config.marker_height*2];
 		config.rows = [config.marker_height, config.marker_height*2, 1];
 		
 		if (content_width != null && content_width != "") {
@@ -5460,7 +5736,9 @@ if(typeof VMM != 'undefined' && typeof VMM.Timeline == 'undefined') {
 		
 	};
 	
-
+	VMM.Timeline.Config = {
+		
+	};
 	/* 	SOURCE DATA PROCESSOR
 	================================================== */
 	VMM.Timeline.DataObj = {