Embedding Google Maps in a privacy friendly way

tips & tricks
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