I want to have a google map with multiple locations pinned. How do I do it?
đșïž How to Create and Embed a Google Map with Multiple Locations
Looking to display a custom map on your website? Whether you're showcasing business locations, travel recommendations, or personalized routes, embedding a Google Map in Webflow is quick and simple. Here's a polished, client-ready guide to help you set it up with ease:
Step 1: Sign In
Log into your Google Account to get started.
Step 2: Access Google Maps
Head to Google Maps.
Step 3: Navigate to "My Maps"
- Click the menu icon (top-left â°).
- Select "Saved", scroll to the bottom, and click "Maps".
- Click "Open My Maps" to access your custom map dashboard.
Step 4: Create a New Map
Click "Create a new map" to start your custom project.
Step 5: Name Your Map
Click the default map title at the top-left and rename it to something relevant.
Step 6: Add Locations
- Use the search bar to find a location, then click âAdd to map.â
- You can also drop pins manually by clicking the pin icon (đ) in the toolbar, then clicking on the map.
- Customize the pin color and icon by clicking the paint bucket icon next to each item in the map legend. Choose from a wide range of colors to visually organize locations (e.g., red for main offices, green for parks, blue for client sites).
- You can also add custom icons or upload your own.

Step 7: Set Sharing Permissions
Click the âShareâ button and update access settings:
- Choose âAnyone with the link can viewâ to make it public and embeddable.
Step 8: Get the Embed Code
- In the mapâs info panel, click the three vertical dots (âź) next to the title.
- Select âEmbed on my site.â
- Uncheck âInclude ownerâs profile photoâ for a clean appearance.
- Copy the iframe code provided.
Step 9: Embed in Webflow
- Open your Webflow project.
- Add an Embed element where you want the map to appear.
- Paste the iframe code into the element.
- Save and publish your site.
â Your custom map is now live and interactive on your Webflow websiteâperfect for directories, travel guides, or contact pages.
đš Want a branded map experience? Customize pin colors to match your brand or theme, and style the map container in Webflow for a seamless integration.
By following this guide you can easily add a custom and interactive map the your site with multiple location pins!
Do you need help with your Webflow website?
Subscribe
Get the latest on our services and Webflowâweâll only send a newsletter when thereâs something worth your time!
