From 549a3f0b8c0b6008c1916d03f669756c6605d723 Mon Sep 17 00:00:00 2001 From: Peter Binkley Date: Sat, 8 Sep 2012 12:26:36 -0600 Subject: [PATCH 1/4] embed generic iframe --- css/style.css | 5 +++++ index.html | 8 ++++++-- map.html | 5 +++++ 3 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 map.html 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..8e2c6ea 100755 --- a/index.html +++ b/index.html @@ -77,7 +77,11 @@

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 +105,4 @@

Balance Media's Vertical Timeline

- \ No newline at end of file + diff --git a/map.html b/map.html new file mode 100644 index 0000000..c57a11d --- /dev/null +++ b/map.html @@ -0,0 +1,5 @@ + + +
View Larger Map + + From 38feb161cfbf832dd48dfe4d34da1f641759fa7e Mon Sep 17 00:00:00 2001 From: Peter Binkley Date: Sat, 8 Sep 2012 13:09:19 -0600 Subject: [PATCH 2/4] basic iframe is working --- index.html | 5 ++++- js/script.js | 6 ++++-- map.html | 5 ----- 3 files changed, 8 insertions(+), 8 deletions(-) delete mode 100644 map.html diff --git a/index.html b/index.html index 8e2c6ea..690cbad 100755 --- a/index.html +++ b/index.html @@ -79,7 +79,10 @@

Balance Media's Vertical Timeline

{{/if}} {{#if google_map}} -
View Larger Map + +
+ View Larger Map {{/if}} {{#if caption}}
({{caption}})
diff --git a/js/script.js b/js/script.js index b1b7486..065571b 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,8 @@ $(function() { el['display_date'] = el['displaydate']; el['read_more_url'] = el['readmoreurl']; el['photo_url'] = el['photourl']; + el['google_map'] = encodeURI(el['googlemap']); + el['google_map_label'] = encodeURI(el['googlemaplabel']); } }); diff --git a/map.html b/map.html deleted file mode 100644 index c57a11d..0000000 --- a/map.html +++ /dev/null @@ -1,5 +0,0 @@ - - -
View Larger Map - - From 3203b83f826f33662f737478e491d9185dd6e08d Mon Sep 17 00:00:00 2001 From: Peter Binkley Date: Sat, 8 Sep 2012 13:19:03 -0600 Subject: [PATCH 3/4] fixed case of absent google_map field --- js/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/script.js b/js/script.js index 065571b..a8769cb 100755 --- a/js/script.js +++ b/js/script.js @@ -21,7 +21,8 @@ $(function() { el['display_date'] = el['displaydate']; el['read_more_url'] = el['readmoreurl']; el['photo_url'] = el['photourl']; - el['google_map'] = encodeURI(el['googlemap']); + if (el['googlemap']) + el['google_map'] = encodeURI(el['googlemap']); el['google_map_label'] = encodeURI(el['googlemaplabel']); } }); From d2cf453c769a78e3e3a0d576b61a9c4133a249d2 Mon Sep 17 00:00:00 2001 From: Peter Binkley Date: Sun, 9 Sep 2012 13:43:14 -0600 Subject: [PATCH 4/4] using pipe-delimited list of values, so can set ll, label, type and zoom --- README.md | 9 +++++++++ index.html | 4 ++-- js/script.js | 18 +++++++++++++++--- 3 files changed, 26 insertions(+), 5 deletions(-) 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/index.html b/index.html index 690cbad..af09649 100755 --- a/index.html +++ b/index.html @@ -80,9 +80,9 @@

Balance Media's Vertical Timeline

{{#if google_map}} + src="https://maps.google.com/maps?{{google_map}}">
- View Larger Map + View Larger Map {{/if}} {{#if caption}}
({{caption}})
diff --git a/js/script.js b/js/script.js index a8769cb..6273d88 100755 --- a/js/script.js +++ b/js/script.js @@ -21,9 +21,21 @@ $(function() { el['display_date'] = el['displaydate']; el['read_more_url'] = el['readmoreurl']; el['photo_url'] = el['photourl']; - if (el['googlemap']) - el['google_map'] = encodeURI(el['googlemap']); - el['google_map_label'] = encodeURI(el['googlemaplabel']); + 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"; + } } });