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

TL;DR
  • Upload your custom marker image (PNG, 40x40) to a hosted URL.  
  • Get a Google Maps API key from Google Cloud Console with Maps JavaScript API enabled.  
  • Add an Embed element in Webflow containing a map container and custom script to load the map and set the custom marker icon using the initMap function.  
  • Publish your site to preview the custom marker live.

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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
In Webflow, when setting an Element to "Relative", how do I choose its positioning relative to other elements?
How can I configure a large image to be in the foreground of my website homepage in Webflow, similar to an example I've seen, while still having a sidebar?
Can Webflow integrate with the dropshipping method offered by this store?
Why is the entry not appearing on Airtable after submitting the form on my Webflow website?
Can Webflow run a script to detect iOS and only display a 'download now' button on iPads for a site designed for an iPad app?
How can I embed a Substack newsletter sign-up form onto my Webflow site using HTML? I've tried adding the code to the head tag following the instructions from the Webflow University article on custom code but it doesn't seem to be working. Any advice?
How can I make my YouTube video perfectly rounded in Webflow when viewing on a Chrome smartphone (iPhone 12 Pro)?
Has anyone else experienced the issue where the background gradient on the "Body (All Pages)" tag in Webflow keeps repeating even after unchecking the 'repeat' checkbox?
Is it possible to make the logo slider in the retailer sections of my Webflow site continuously rotate smoothly from right to left instead of changing like a regular slider?
How can I create a "FAQ like" page in Webflow with multiple accordion menus that close when another is clicked? I understand that I need to set the interactions for siblings, child, parents of the class, but I'm unsure which family member is responsible. Thank you for any tips!
How can I create a scrolling effect for a section with multiple company logos of varying widths in Webflow?
How can I hide or show a section/container with a button click in Webflow?
How can I import a Mapbox from Codepen into Webflow and what could be causing issues with the access token?
Is it possible to create a client dashboard in Webflow where they can upload content via a form to update the CMS of the main site? If so, how can this be done?
Can you assist with an issue on our Webflow site involving the "Jobs" button on the jobs page?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?