Wowchemy-hugo-modules: contact widget: Add option to show Google Maps

[fabrizziosoares]

Is there any way to put maps with location, directions on my contact section?

[byzheng]

For a shortcut

• get an google map api: https://developers.google.com/maps/documentation/javascript/get-api-key
• Find the latitude and longitude for your marker
• add html codes into contact.md

<div id="map" style="width:400px;height:400px;background:yellow"></div>
<script>
function myMap() {
    var uluru = {lat: your-latitude, lng: your-longitude};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=your-api-key&callback=myMap"></script>

[fabrizziosoares]

@byzheng, How can I add the HTML to my contact.md? I paste it there and I got this error:
Source changed "/home/fabrizzio/website/fabrizzio/content/home/contact.md": CREATE
ERROR 2017/10/12 14:57:10 failed to parse page metadata for "home/contact.md": Near line 14 (last key parsed ''): bare keys cannot contain '<'
ERROR 2017/10/12 14:57:10 Errors reading pages: Error: failed to parse page metadata for "home/contact.md": Near line 14 (last key parsed ''): bare keys cannot contain '<' for contact.md

[byzheng]

add at the end of me file after +++

On 13 Oct 2017 04:01, "Fabrizzio Soares" [e-mail] wrote:

@byzheng https://github.com/byzheng, How can I add the HTML to my
contact.md? I paste it there and I got this error:
Source changed "/home/fabrizzio/website/fabrizzio/content/home/contact.md":
CREATE
ERROR 2017/10/12 14:57:10 failed to parse page metadata for "home/
contact.md": Near line 14 (last key parsed ''): bare keys cannot contain
'<'
ERROR 2017/10/12 14:57:10 Errors reading pages: Error: failed to parse
page metadata for "home/contact.md": Near line 14 (last key parsed ''):
bare keys cannot contain '<' for contact.md

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gcushen/hugo-academic/issues/301#issuecomment-336217790,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABlKJctDBauXjY02JaoG-3azGzg8gUmqks5srlPbgaJpZM4P0w_A
.

[fabrizziosoares]

Thanks @byzheng. I did it and I had an error about bootstrap and jquery, but I add this lines before the script:

And now it is working like a charm!

[byzheng]

@fabrizziosoares Too strange, it is not working for me anymore with totally different error. Will further dig in.

[fabrizziosoares]

@byzheng this is my working code.

<script>

  function initMap() {
    var mapCenter = {lat: yyyy, lng: xxxxx };
    var infPosition = {lat: yyyy, lng: xxxxx };

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: mapCenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markerINF = new google.maps.Marker({
      position: infPosition,
      map: map,
      title:"Descrition text..."
    });

    var contentStringINF = 'Description text...';
    var infowindow = new google.maps.InfoWindow({
        content: contentStringINF
    });
    infowindow.open(map,markerINF);
    google.maps.event.addListener(markerINF, 'click', function() {
       infowindow.open(map,markerINF);
    });


  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<key>&callback=initMap">
</script>

[byzheng]

Finally I can reproduce the example I did yesterday

See source codes here: https://github.com/byzheng/hugo-test/blob/master/content/home/contact.md
and the deployed site here: https://artist-roger-76414.netlify.com/

PS: Really strange. I need a new line after <div id="map">, otherwise hugo converted the quotation into html codes.
PS: I am using hugo 0.27

[fabrizziosoares]

Great news @byzheng ! Did you reproduce it using your code or mine?
I am using latest hugo, 0.29 I guess. What Did you do to work?

[fabrizziosoares]

@byzheng I've been looking at links you posted. Firstly, If you use width for map greater than 400 you're gonna have issues on mobile devices. Second, you're are sharing your code with your key. I guess this is a little bit dangerous. Have you restricted access to your key? I recommend you do it if you didn't.

[byzheng]

@fabrizziosoares I use deploy my website through netlify and add an environmental variable HUGO_VERSION 0.27.

It is just a test key for demoing your question. Will remove it in a few days.

[byzheng]

@fabrizziosoares Just test hugo 0.29. It still works for me.

[gcushen]

This feature has now been added. Simply update to latest version, then add the following under [params] in your config.toml:

  # 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"

[byzheng]

I find a simple solution to add Google Map without map API key, latitude and longitude. Just go to maps.google.com and search your location. Then you can click share, embed map, and find some html codes . Finally you can paste the html codes into your contact.md.