How can I add a custom map marker to Google Maps using Webflow?

To add a custom map marker to Google Maps in Webflow, you’ll need to embed a Google Map with custom JavaScript that sets your marker icon. Webflow doesn’t offer native tools for custom markers, so this requires using the Embed element.

1. Prepare Your Custom Marker

• Create or select your custom marker image.
• Make sure it’s accessible via a hosted URL (e.g., upload to Webflow assets or an external CDN).
• Recommended format: PNG, preferably 40x40 pixels with a transparent background.

2. Get a Google Maps API Key

• Go to the Google Cloud Console.
• Enable the Maps JavaScript API.
• Create credentials and copy your API key.

3. Add an Embed Element in Webflow

• On your Webflow canvas, drag an Embed component into your desired section.
• Inside the embed, paste a custom HTML snippet to initialize the map and add your custom marker.

Here’s a simplified overview of what the embed will contain (note: do not use full HTML; Webflow will handle the page structure):

• Load the Maps API script using:  

  https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap (with async defer)

• Include a container <div> with an ID like map.
• Write a script to initialize the map using initMap and set the custom marker using the icon property.

4. Example Script Breakdown

Inside the Webflow Embed element, include:

• A map container:
• <div id="map" style="width: 100%; height: 400px;"></div>
• A script block with:
• A global initMap() function
• A google.maps.Map() instance
• A google.maps.Marker() using your image URL for the icon

5. Publish Your Site to Test

• Webflow won’t render the live map in the Designer.
• Publish your site to a custom domain or Webflow staging.
• Ensure the map loads, and the custom marker appears.

Summary

To add a custom map marker in Webflow, use the Embed element with a custom Google Maps script. Upload your marker image, get a Google Maps API key, and initialize the map with a custom icon in the marker configuration.