Google map

README.md

@@ -18,10 +18,19 @@ Create a Google Spreadsheet with the following columns:
 * caption
 * body 
 * read more url
+* google map
 
 **Please note that the the _display date_ column must be in the format _Month day, Year_ (April 25, 2012) for proper javascript parsing.**
 **Also, all columns must be _plain text_ format, including the two date columns.**
 
+The _google map_ column contains a pipe-delimited list of parameters for a Google Map, which will appear in an iframe:
+* ll: lat,long
+* label: the text to appear in the popup on the marker
+* type: m=map, k=satellite, h=hybrid
+* zoom level
+
+E.g. 27.173186,78.041661|Taj Mahal|h|16
+
 Now follow the instructions over at Tabletop.js to publish the Spreadsheet.
 
 The Spreadsheet used in the example index.html file is at [https://docs.google.com/spreadsheet/ccc?key=0AsmHVq28GtVJdG1fX3dsQlZrY18zTVA2ZG8wTXdtNHc](https://docs.google.com/spreadsheet/ccc?key=0AsmHVq28GtVJdG1fX3dsQlZrY18zTVA2ZG8wTXdtNHc)

css/style.css

@@ -145,6 +145,11 @@ body{
 #timeline .post .body img{
 	max-width: 247px;
 }
+/* iframe for Google map */
+#timeline .post .body iframe{
+	width: 247px;
+	height: 300px;
+}
 #timeline .post .text{
 	color: #393939;
 	font-family: Georgia, sans-serif;

index.html

@@ -77,7 +77,14 @@ <h1>Balance Media's Vertical Timeline</h1>
           {{#if photo_url}}
             <img src="{{photo_url}}" alt="">
           {{/if}}
-          {{#if caption}}
+          {{#if google_map}}
+
+	  <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
+		  src="https://maps.google.com/maps?{{google_map}}"></iframe>
+	  <br />
+	  <small><a href="https://maps.google.com/maps?{{google_map}}" style="color:#0000FF;text-align:left">View Larger Map</a></small>
+	  {{/if}}
+	  {{#if caption}}
             <div class="caption">({{caption}})</div>
           {{/if}}
           {{#if body}}
@@ -101,4 +108,4 @@ <h1>Balance Media's Vertical Timeline</h1>
   </script>
 
 </body>
-</html>
+</html>

js/script.js

@@ -1,7 +1,7 @@
 // Script variables
 var timelineConfig = {
-	key: '0AsmHVq28GtVJdG1fX3dsQlZrY18zTVA2ZG8wTXdtNHc',
-	sheetName: 'Posts' // change to name of spreadsheet 'sheet' that contains the data
+        key: '0AsmHVq28GtVJdG1fX3dsQlZrY18zTVA2ZG8wTXdtNHc',
+        sheetName: 'Posts' // change to name of spreadsheet 'sheet' that contains the data
 }
 
 
@@ -21,6 +21,21 @@ $(function() {
 			el['display_date'] = el['displaydate'];
 			el['read_more_url'] = el['readmoreurl'];
 			el['photo_url'] = el['photourl'];
+			if (el['googlemap']) {
+			   /**
+			   * pipe-delimited list of params:
+			   * ll
+			   * label
+			   * t (type: m, k, h)
+			   * z (zoom level)
+			   */
+			   var tokens = el['googlemap'].split("|");
+				el['google_map'] = "q=" + encodeURI(tokens[0] + " (" + tokens[1] + ")")
+				  + "&ll=" + encodeURI(tokens[0])
+				  + "&t=" + encodeURI(tokens[2])
+				  + "&z=" + encodeURI(tokens[3])
+				  + "&hl=en&ie=UTF8&iwloc=near&output=embed";
+				}
 		}
 	});