Embedding Google Maps in a privacy friendly way

tips & tricks
1

For the same reasons mentioned here, it is not a good idea to embed a Google Map in your website. However, you can MOCK an embed (same approach as with the Youtube video). An example implementation (Hugo website) can be found in the FOOTER of the website of ZOE-IT.

What you need is:

  • A link to Google Maps
  • An image from Snazzy Maps
  • The code from my example (CSS and HTML)
  • A marker image (SVG)
  • A fullscreen icon (from Google Fonts Icons)

Happy coding!

5 Likes
2

I added a shortcode using your method to my general purpose shortcode collection. Now actually implementing in a website, and I’m wondering if I’m dumb, or how did you get a screenshot of Gmaps without the pin and still centred on your desired location? I don’t quite understand Snazzy maps, or how it is relevant…

1 Like
3

How to get the map image (and the relevance of snazzy maps):

  1. Go to Interface map - Snazzy Maps - Free Styles for Google Maps
  2. Click the search icon
  3. Type in your location
  4. Take a screenshot of your screen
2 Likes
4

I was concerned about copyright issues with Google Maps and Google Static Map API Images, also saving their images rather than fetching with API looks like it would break their Terms of Service, so I adapted this for https://www.openstreetmap.org/.

This shortcode will load the map as a static image, then load the interactive map on click:

Steps to create this are:

  1. Find location on https://www.openstreetmap.org/
  2. click “share” icon
  3. Check “Include marker” and center it on your location
  4. Take a screenshot (can instead use their own image download functionality)
  5. Click “html” button in share pane
  6. Copy html share code
  7. Use iframe src url (from share code) for shortcode
  8. Use View Larger Map Link (from share code) for shortcode
  9. Define your own id, mapTitle, mapLocation & mapImg for the shortcode

here is the gist: https://gist.github.com/jemmsuk/fb7bf09d29fe6e92a75e028026ad262b

Here it is in action: https://www.caminosantiagocompostela.com/guggenheim-museum-bilbao-worth-visiting/#map-of-guggenheim-museum-in-bilbao

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.