Maps in Webflow

Community resources General
1

I was wondering if there was a way you can create a map like this in Webflow that shows off a service area.

Screenshot (12)
Screenshot (12)3840Ă—1049 1.06 MB

2

Webflow does not provide this out of the box. You can certainly accomplish this with map services and custom code. Pick your map provider and review the API options to get started.

3

In addition to webdev’s advice, this may help if you choose to use Google Maps :slight_smile:

5

Just spoke with a super helpful Webflow support specialist (Thanks Chris!) who gave me the easiest workaround which will hopefully also work for others.

Build own map in Google, (using the draw option to build service area), then use that iframe to embed into a container. No map or API from Google needed in this case.

How to add service area map to website:

  1. Build your map in Google ( Step by step instruction here: Create or open a map - Computer - My Maps Help )

  2. Next to the map name, click the 3 dots and that will give you the option to “embed”. Copy that.

  3. Go back to webflow. Add a container to your section. Within that container add an “embed” block - (at the bottom in components). Paste the info you got from Google. Paste. Save and close.

Boom. Ya done.

FYI, there are some downfalls with this. There is an area at the top with the label which may not look as sleek as you may wish it did. You don’t have the same map settings (mouse over settings, potential sizing issues).

This ended up being a solution that worked for me and my client, but be forewarned that even though it’s a GREAT workaround, it’s definitely not perfect.

1 Like