diff --git a/README.md b/README.md index 6a58b4e..38ee96b 100644 --- a/README.md +++ b/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) diff --git a/css/style.css b/css/style.css index 6d8de40..7618833 100755 --- a/css/style.css +++ b/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; diff --git a/index.html b/index.html index d58d9a0..af09649 100755 --- a/index.html +++ b/index.html @@ -77,7 +77,14 @@

Balance Media's Vertical Timeline

{{#if photo_url}} {{/if}} - {{#if caption}} + {{#if google_map}} + + +
+ View Larger Map + {{/if}} + {{#if caption}}
({{caption}})
{{/if}} {{#if body}} @@ -101,4 +108,4 @@

Balance Media's Vertical Timeline

- \ No newline at end of file + diff --git a/js/script.js b/js/script.js index b1b7486..6273d88 100755 --- a/js/script.js +++ b/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"; + } } });