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!

Published:
June 9, 2025
Last Updated:
June 11, 2025

Do you need help with your Webflow website?

Focus on your business while we handle your Webflow maintenance, updates and fixes, stress-free.
Option 1: Simple hourly pricing
Option 2: Retainer with extra perks and discounted hourly pricing
Option 3: Prepaid maintenance packages
CHECK our Maintenance offer