Hi Guys,
I am trying to create an interactive map like this: https://www.americanhomes4rent.com/
Is this possible with Webflow? I’ve seen examples using absolute position, but nothing with custom shapes like states.
Thanks guys!
Here is my public share link: LINK
(how to access public share link)
This is A big challenge - interesting!
Circling back. Any input on how this would be possible? Need an interactive map of the United States. Each state is linked to a different page.
Example Below:
Well, from what I see from the website, they work with SVG Paths, making the interactivity happen with the use of combo of classes like listed and selectedto change the background color and also a couple of scripts to get the navigation to work using the map. They also didn’t really make it responsive, so the map is always the same size which makes things easier.
This is something that is very time demanding, so I don’t really see people from the forum guiding you through the whole process, unless you ask something a bit more specific.
Feel free to get in touch with me in case of any doubts
@Jeandcc Thank you for your feedback. Is there an easier way to achieve this in Webflow? If not, could you point me in a direction with some documentation for SVG paths on webflow?
Thanks!
Webflow still hasn’t perfected itself when the subject is the use of SVGs. This is something they definitely should think about in the future. You’re going to need to deal with that with plain coding. You’re definitely going to make use of the EMBED element from Webflow, and most of the magic will happen inside it. Luckily Webflow will show you a preview of the SVG from within the designer, so things will be easier to see while editing. Now all you gotta do is read and learn. There’s plenty of documentation out there talking about SVGs in general.
But if you feel like that’s not your thing and you’ll end up losing a lot of time working on that, I recommend you hiring someone to get that done. We can talk and get something that works for both ends if you decide to do so in the future.
Interactive map = usings javascript API of google maps (or another map widget). Read more about google maps ´markers´.
In cms view each location needs lat and lng (numbers feild).
See my codepen (± related):
https://codepen.io/ezra_siton/details/QRrXyL
This is not “live” map. Regular shapes one next each other (by position absolute) each shape open tooltip on click.Easier to solve this by embed html (create codepen)
Cms: Each state with name + reference feild (for the dropdown) + bg color + image (svg) + left / top position.
Anyway this is complex mission 
inside page you need to use mixitup (or filter by url parameters). Filter by price range this is also sub mission.
Another person here with exactly the same issue. Need an interactive map of France just like the one you posted for the USA.
Really wish Webflow would make this possible somehow.
