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!