Google maps CMS iFrame

Design help Custom code
1

I would like to use CMS to display different maps at the bottom of each collection page. I set up embedded code on the CMS page and would like to have the google maps link to be a field so I can change it out depending on the content. The field is set to plain text and I put the link in the CMS collection, however it will not show up when published.

Any help is appreciated!

Screenshot 2024-12-18 094359

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I actually did this for a church client and their events page. I had to go to google’s maps api and set up an account. If 100% free and for embed api calls and if you set it up right people can’t use your api key outside of your site.

Google Maps API: Google Maps Platform  |  Google for Developers

<iframe
  width="100%"
  height="100%"
  style="border-radius:20px; border-color: #dee7fb"
  loading="lazy"
  src="https://www.google.com/maps/embed/v1/place?key=[YOUR KEY]&zoom=17&q=[LOCATION NAME] [LOCATION ADDRESS]">
</iframe>

the “zoom” querry sets the zoom of the map. I also put both the address and the location name so google displays the right name incase there are multiple businesses with the same address.

Hope this helps!

edit:
also another thing i did with this was i made a get directions button. and I used a script to inject the google maps address into the button. I’m giving you the code snippet to do this.

directionsBttnElement.href =‘Google Maps’ + encodeURIComponent(“[YOUR ADDRESS]”)