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 need to use the Google Maps JavaScript API and reference your custom marker icon. Webflow doesn’t have native support for this, so it requires minimal code embedding.

1. Prepare Your Custom Marker Icon

• Host your icon (e.g., a PNG or SVG) somewhere publicly accessible; Webflow assets or external URLs like Cloudinary will work.
• Recommended size is around 32x32 pixels or smaller for best display performance.

2. Get a Google Maps JavaScript API Key

• Go to Google Cloud Console.
• Create a project and enable the Maps JavaScript API.
• Generate an API key and restrict it to your domain for security.

3. Embed the Google Maps Script

• In Webflow, open your page settings.

• Scroll to "Before tag" and embed this line, replacing YOUR_API_KEY with your real API key:

  https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

• Add this as a Script tag with async defer, and set initMap as your map load callback.

4. Add the Custom Map Embed Code

• Create a div with an ID (e.g., id="custom-map") where the map will appear.

• Add this JavaScript code in the Before tag section as well:

  Do not include raw HTML tags here; use inline script in Webflow.

  Example:

  ```

  ```

5. Style the Map Container

• In the Webflow Designer, assign a height and width to your #custom-map div—Google Maps requires defined dimensions to load properly.
• Typical styles: width: 100%, height: 400px.

Summary

To use a custom map marker in Webflow, embed the Google Maps JavaScript API with a callback, reference your icon URL in the marker config, and load the map in a styled div. This approach enables full customization of Google Maps in Webflow-compatible pages.