contact widget: Add option to show Google Maps (Close #301)

* Add `google_maps_api_key = ""` option to config
* Add `latitude = "37.4275"` option to config
* Add `longitude = "-122.1697"` option to config

data/sri.toml

@@ -28,6 +28,9 @@
 [js.autotrack]
   version = "2.4.1"
   sri = "sha512-HUmooslVKj4m6OBu0OgzjXXr+QuFYy/k7eLI5jdeEy/F4RSgMn6XRWRGkFi5IFaFgy7uFTkegp3Z0XnJf3Jq+g=="
+[js.gmaps]
+  version = "0.4.25"
+  sri = "sha256-7vjlAeb8OaTrCXZkCNun9djzuB2owUsaO72kXaFDBJs="
 
 # CSS
 

exampleSite/config.toml

@@ -53,6 +53,14 @@ defaultContentLanguageInSubdir = false
   # Enable Keybase in Contact section by entering your keybase.io username.
   keybase = ""
 
+  # Enable Google Maps by entering your API key, latitude, and longitude.
+  #   Get your API key: https://developers.google.com/maps/documentation/javascript/get-api-key
+  #   Get your coords: Right-click place on Google Maps. Select 'What's here?'. At the bottom is a card with the coords.
+  #   Disable Google Maps by clearing all three options to "".
+  google_maps_api_key = ""
+  latitude = "37.4275"
+  longitude = "-122.1697"
+
   # Date format (refer to Go's date format: http://flippinggodateformat.com )
   #   Examples: "Mon, Jan 2, 2006" or "2006-01-02"
   date_format = "Jan 2, 2006"

layouts/partials/css/academic.css

@@ -800,6 +800,11 @@ article {
   margin-bottom: 0;
 }
 
+#map {
+  height: 350px;
+  width: 100%;
+}
+
 /*************************************************
  *  Footer
  **************************************************/

layouts/partials/footer.html

@@ -5,16 +5,24 @@
     <script id="dsq-count-scr" src="//{{ .Site.DisqusShortname }}.disqus.com/count.js" async></script>
     {{ end }}
 
+    {{ if .Site.Params.google_maps_api_key }}
+    <script async defer src="//maps.googleapis.com/maps/api/js?key={{ .Site.Params.google_maps_api_key }}"></script>
+    {{ else }}
+    <script async defer src="//maps.googleapis.com/maps/api/js"></script>
+    {{ end }}
+
     {{ if not .Site.Params.disable_sri }}
     {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/%s/jquery.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.jQuery.version $js.jQuery.sri | safeHTML }}
     {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/%s/imagesloaded.pkgd.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.imagesLoaded.version $js.imagesLoaded.sri | safeHTML }}
     {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/js/bootstrap.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.bootstrap.version $js.bootstrap.sri | safeHTML }}
     {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/%s/isotope.pkgd.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.isotope.version $js.isotope.sri | safeHTML }}
+    {{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/%s/gmaps.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.gmaps.version $js.gmaps.sri | safeHTML }}
     {{ else }}
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/{{- $js.jQuery.version -}}/jquery.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/{{- $js.imagesLoaded.version -}}/imagesloaded.pkgd.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/{{- $js.bootstrap.version -}}/js/bootstrap.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/{{- $js.isotope.version -}}/isotope.pkgd.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/gmaps.js/{{- $js.gmaps.version -}}/gmaps.min.js"></script>
     {{ end }}
     <script src="{{ "/js/hugo-academic.js" | relURL }}"></script>
     {{ range .Site.Params.custom_js }}

layouts/partials/widgets/contact.html

@@ -74,5 +74,14 @@
 
     </ul>
 
+    {{ if and $.Site.Params.latitude $.Site.Params.longitude }}
+    <div class="hidden">
+      <input id="gmap-lat" value="{{ $.Site.Params.latitude }}" />
+      <input id="gmap-lng" value="{{ $.Site.Params.longitude }}" />
+      <input id="gmap-dir" value="{{ $.Site.Params.address }}" />
+    </div>
+    <div id="map"></div>
+    {{ end }}
+
   </div>
 </div>

static/js/hugo-academic.js

@@ -197,6 +197,45 @@
     $('.pubtype-select').val(filterValue);
   }
 
+  /* ---------------------------------------------------------------------------
+  * Google maps.
+  * --------------------------------------------------------------------------- */
+
+  function initMap () {
+    if ($('#map').length) {
+      let lat = $('#gmap-lat').val();
+      let lng = $('#gmap-lng').val();
+      let address = $('#gmap-dir').val();
+
+      let map = new GMaps({
+        div: '#map',
+        lat: lat,
+        lng: lng,
+        zoomControl: true,
+        zoomControlOpt: {
+          style: 'SMALL',
+          position: 'TOP_LEFT'
+        },
+        panControl: false,
+        streetViewControl: false,
+        mapTypeControl: false,
+        overviewMapControl: false,
+        scrollwheel: true,
+        draggable: true
+      });
+
+      map.addMarker({
+        lat: lat,
+        lng: lng,
+        click: function (e) {
+          let url = 'https://www.google.com/maps/place/' + encodeURIComponent(address) + '/@' + lat + ',' + lng +'/';
+          window.open(url, '_blank')
+        },
+        title: address
+      })
+    }
+  }
+
   /* ---------------------------------------------------------------------------
    * On window load.
    * --------------------------------------------------------------------------- */
@@ -230,6 +269,8 @@
       // window.addEventListener('hashchange', filter_publications, false);
     }
 
+    // Initialise Google Maps if necessary.
+    initMap();
   });
 
 })(jQuery);