Streaming live at 10am (PST)

Use the value of a Collection field in a Map


#1

I want to use the value of a text field, which will be an address, for the tab in a Google map on a Collection Page. I already have the ID Key and the map is loaded onto the page. So each collection page will generate a different map. How do I do that?

If you use collection page on the read-only site, look at the page for George Edwards. His is the only one with a meaningful (though erroneous) address.

Thanks,
Marty

https://preview.webflow.com/preview/pledge-list?utm_source=pledge-list&preview=889c625dd810a87a339a28b942d4f732


#2

Hi @mwulfe

You’ll need to add a HTML embed to your template page with the following code:

CloudApp

<iframe
width="100%"
height="100%"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR API KEY HERE
&q=DYNAMIC FIELD HERE" allowfullscreen>
</iframe>

In your collection list you’ll need a plain text field and the address needs to be added with + sign instead of spaces like so: 440+Avenue+du+Mont-Royal+E+Montréal+QC+H2J+1W1

Hope that helps! :slight_smile:


#3

donaldsv, yes that helps for a start, although I was not sure what to do with the “DYNAMIC FIELD HERE” text so I left it unchanged. Then, using Webflow, how do I modify the value of a text field by substituting “+” characters for spaces? I am not a Javascript programmer. And once I do that, how do I submit that text to the map?


#4

I do have a plain text field in my collection that is the address. Where would that go in the script? I was getting a rejection from Google, it was not accepting the key from that app even tho it accepted it from the Webfrow map control.


#5

See the red arrow, you have to click on Add Field in the top right corner, then you select your address field from your collection.

The address needs to be entered with + signs in the plain text field instead of spaces since that’s how google URLs work.

CloudApp


#6

This map component needs to be replaced with a HTML Embed element.

CloudApp


#7

I inserted the address field name as shown, but I am still getting a rejection from Google:


#8

You need to check your API settings in the google console.


#9

All considered I think it would be easier to just include a button that is a link to the Google Maps page and let that open in a separate window. so www.google.com/maps/place/123+Main+St.+St.Louis+Mo format should work, right?


#10

Yeah! that’s another way to do it :slight_smile: