Replace Google Maps iframe with Google Static Map image(s) (#42)

* Dynamically generate a Google Static Map from a new data file: venue.yml

* Set config params such as `env` and `google_maps_key`. Use the google maps key in ‘production’ mode.

config.rb

@@ -15,7 +15,6 @@
                       no_intra_emphasis: true,
                       lax_spacing: true,
                       with_toc_data: true
-
 # Helpers ----------------------------------------------------------------------
 
 require "lib/typography_helpers"
@@ -84,12 +83,16 @@
 
 # Reload the browser automatically whenever files change
 configure :development do
+  set :env, "development"
+  set :google_maps_key, nil
   activate :livereload
 end
 
 # Build-specific configuration -------------------------------------------------
 
 configure :build do
+  set :env, "production"
+  set :google_maps_key, "AIzaSyBdI51q8kJ9s19RmWunLFFUZKFTxDXTSBA"
 end
 
 # Deployment configuration -----------------------------------------------------

data/venue.yml

@@ -0,0 +1,21 @@
+name: Museum of New Zealand, Te Papa Tongarewa
+nickname: Te Papa
+address: 55 Cable Street, Te Aro, Wellington 6011, New Zealand
+url: https://www.tepapa.govt.nz/
+location:
+  lat: -41.2905022
+  long: 174.7817372
+maps:
+  url: https://goo.gl/maps/ZSehkwLEvk52
+  img_src_base: https://maps.googleapis.com/maps/api/staticmap?center=Te+Papa%2C+Wellington%2C+New+Zealand&maptype=roadmap
+  sizes:
+  - name: large
+    breakpoint: "min-width: 640px"
+    zoom: 16
+    dimensions: "640x400"
+    scale: 2
+  - name: small 
+    breakpoint: "max-width: 639px"
+    zoom: 15
+    dimensions: "320x200"
+    scale: 2

source/assets/public/index.css

@@ -505,16 +505,12 @@ strong {
 .c-responsive-map {
     max-width: 85rem;
     position: relative;
-    padding-bottom: 55%;
-    height: 0;
-    overflow: hidden;
 }
-.c-responsive-map iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100% !important;
-    height: 100% !important;
+.c-responsive-map a {
+  border: none;
+}
+.c-responsive-map img {
+  max-width: 100%;
 }
 
 .h-lots-of-padding-top {

source/partials/_te_papa_map.html.slim

@@ -1,8 +1,23 @@
+- url = data.venue.maps.img_src_base \
+  + "&key=#{config[:google_maps_key]}" \
+  + "&markers=#{data.venue.location.lat}%2C#{data.venue.location.long}"
+- fallBackUrl = url \
+  + "&scale=#{data.venue.maps.sizes.first.scale}" \
+  + "&zoom=#{data.venue.maps.sizes.first.zoom}" \
+  + "&size=#{data.venue.maps.sizes.first.dimensions}"
 .c-responsive-map
-  <iframe width="450"
-  '        height="250"
-  '        frameborder="0"
-  '        style="border:0"
-  '        src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDaFJR5kaMRyXO_-1alNS9BNbMHrLHVilk&q='Te Papa, Wellington, New Zealand'"
-  '        allowfullscreen>
-  </iframe>
+  a href=data.venue.maps.url target="_blank" rel="noopener nofollow"
+    picture
+      - data.venue.maps.sizes.each do |item|
+        - itemUrl = url \
+          + "&scale=#{item.scale}" \
+          + "&zoom=#{item.zoom}" \
+          + "&size=#{item.dimensions}"
+        source [ 
+          media="(#{item.breakpoint})"
+          srcset=itemUrl
+        ]
+      img [
+        alt="Map to #{data.venue.nickname}"
+        src=fallBackUrl
+      ]