How can I bind search input value to the map?

[MaxenceP]

Hi,

I’m new to Weweb and I’d like to bind the result of a searchbar value to the markers of the map element.

• I created the workflow

• • Created a variable
• • Make this variable change depending of the searchbar value

→ But now i lack the connexion with the map

Thanks

[flo]

Hi MaxenceP,

Unfortunately, map element markers are not yet “bindable” with external data. However, you can use the HTML element with a Google map iframe. Here is how you can add it to your page:

1. Add the element in your page

2. Then instead of “copying and pasting” directly in the formula, it’s better to create a function. You will see, it’s not that hard .

Like this

Here is the code you can add:

return `
<iframe
  width="600"
  height="450"
  style="border:0"
  loading="lazy"
  allowfullscreen
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=${search}">
</iframe>
`

Don’t forget to add a Parameter called search, here:

And you API key here:

3. Then you can select your HTML element and click on the plug button to use your brand-new custom function. Like this

4. Then go click on your custom function

And add your variable between the parenthesis

And here you go

You can find all the properties you can use with the map here: Embedding a map  |  Maps Embed API  |  Google Developers

You just need to update the custom function to add and manage more properties. Feel free to ask if you need help with this.

Tell us if that worked for you

[MaxenceP]

Thanks a lot ! I’ll try it soon

[HamishW]

I just used this to show a map on individual listing pages and it works great. The only thing (as I was tired and took me waaaaay to long to figure out) is:

• where it says “Function” what you need to do is create a new “Formula”
• the code needs a semicolon at the end so it’s

return `

`;

Other than that it was exactly what I needed so much appreciated!