How can I bind search input value to the map?

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 :slight_smile:

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

2022-02-18 15.14.08

  1. 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 :wink:.

Like this :point_down:

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:

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

  1. 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 :wink:

2 Likes

Thanks a lot ! I’ll try it soon

1 Like