Embed Google Map On Website, Full Page If Needed

Tips & Tricks
1

I’m posting this because when I searched on the forum for embedding a map into a Hype doc. I felt the previous postings that showed up were outdated, with literally dead links and even some techniques using discontinued API’s.

This link explains what I did. https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDesktop&hl=en

The basic concept is open up google maps, https://www.google.com/maps and type in a location into the search bar, then click the hamburger icon (three horizontal bars) and then click Share or Embed Map, then click the tab for Embed, then copy and paste the embed iframe code into the inner HTML of a rectangle in Hype. In my case, I changed the pixel dimensions from whatever dimensions it has to width of 100% and height of 100%.

If you don’t want it to be full screen, then just have it be 100% but don’t have my flexible layout settings, and size the rectangle however you like.

Google Map.hype.zip (11.9 KB)

There may be other ways to embed maps with Hype that are just as easy or alternate techniques with other maps than Google’s. If you’ve got a technique you like, or if there are any issues with my technique, please post a response.

1 Like
2

I like the Leaflet / OpenStreetMap combo. With these Open Source / Open Data alternatives, it's easy to create simple maps...

If you don't like Google, or simply don't want to depend on a third-party for hosting your maps, the Leaflet / OpenStreetMap combo is a nice solution that can be self-hosted or even used offline. See the Leaflet / OpenStreetMap license agreements for details.

The SVG export of the maps look really sharp and Leaflet is an easy way to display it.