From f640bc42509764ffd93837880f54b2c23e48feca Mon Sep 17 00:00:00 2001 From: George Cushen Date: Sun, 15 Oct 2017 06:26:04 +0100 Subject: [PATCH] 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 | 3 ++ exampleSite/config.toml | 8 ++++++ layouts/partials/css/academic.css | 5 ++++ layouts/partials/footer.html | 8 ++++++ layouts/partials/widgets/contact.html | 9 ++++++ static/js/hugo-academic.js | 41 +++++++++++++++++++++++++++ 6 files changed, 74 insertions(+) diff --git a/data/sri.toml b/data/sri.toml index 6fed5fba..e5a2e12b 100644 --- a/data/sri.toml +++ b/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 diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 4e1d846c..104bcb7f 100644 --- a/exampleSite/config.toml +++ b/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" diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css index 67e73633..71517230 100644 --- a/layouts/partials/css/academic.css +++ b/layouts/partials/css/academic.css @@ -800,6 +800,11 @@ article { margin-bottom: 0; } +#map { + height: 350px; + width: 100%; +} + /************************************************* * Footer **************************************************/ diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index c164f0b4..ac2bed23 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -5,16 +5,24 @@ {{ end }} + {{ if .Site.Params.google_maps_api_key }} + + {{ else }} + + {{ end }} + {{ if not .Site.Params.disable_sri }} {{ printf "" $js.jQuery.version $js.jQuery.sri | safeHTML }} {{ printf "" $js.imagesLoaded.version $js.imagesLoaded.sri | safeHTML }} {{ printf "" $js.bootstrap.version $js.bootstrap.sri | safeHTML }} {{ printf "" $js.isotope.version $js.isotope.sri | safeHTML }} + {{ printf "" $js.gmaps.version $js.gmaps.sri | safeHTML }} {{ else }} + {{ end }} {{ range .Site.Params.custom_js }} diff --git a/layouts/partials/widgets/contact.html b/layouts/partials/widgets/contact.html index 4d0890fd..76b11e53 100644 --- a/layouts/partials/widgets/contact.html +++ b/layouts/partials/widgets/contact.html @@ -74,5 +74,14 @@ + {{ if and $.Site.Params.latitude $.Site.Params.longitude }} + +
+ {{ end }} + diff --git a/static/js/hugo-academic.js b/static/js/hugo-academic.js index ae53fb38..d83aff09 100644 --- a/static/js/hugo-academic.js +++ b/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);