Google map - CMS embed (Not API)

Hi, fellow Webflowers,

I’m trying to embed a google map using the embed code like this one in the CMS.

()

I know from other posts that it can be done with an API key but apparently it’s not a free service anymore. How do I make the CMS embed pull in the unique embed (map) codes I have entered under each collection item? I can’t really give you a link yet as it’s still very unfinished except for a screen dump. I’m sorry if it sounds confusing. Please note I DO NOT code so bear with me…

Thanks!


Here is my public share link: LINK
(how to access public share link)

You need a couple of things here:

  1. In your item collection add a text field
  2. Insert an custom code element into your CMS item page
  3. Insert the following code but change the part “MAP-ID” for the field ‘map-id’ you previously created
    <iframe src="https://www.google.com/maps/embed?pb=MAP-ID" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  4. Once you get this, just add the code required in every CMS item

The code you need to change for each item’s map is the stroked one:

iframe src=“https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d5236.837282203723!2d-6.333919741245479!3d54.212205496265035!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4860dcc8961aeaa5%3A0x2e78bfc807c5d712!2sBarkston!5e0!3m2!1sen!2suk!4v1552937236294,” width=“600” height=“450” frameborder=“0” style=“border:0” allowfullscreen

1 Like

Hi Aaronocampo,

Sorry for the late reply.
Exactly what I was looking for…
Thanks for your help and time.

1 Like