Webflow ships a Map component, but it is the stock grey Google map and it asks for a Google Maps API key. To get a map that matches your Webflow site's brand, use a Tint embed inside a Webflow Embed element.
Steps
1
Create the map in Tint
Open the Tint Studio, pick a theme or paste your brand color, drop your pins, and publish. Copy the map ID and embed snippet.
2
Add an Embed element in Webflow
In the Webflow Designer, drag an "Embed" element (Add panel → Components → Embed) to where you want the map.
3
Paste the Tint snippet
Paste the snippet into the Embed code field and save. Publish your Webflow site — the branded map is live.
<!-- Paste where the map should appear -->
<div data-tint="MAP_ID" style="height:420px"></div>
<script src="https://embed.tintmap.dev/v1/embed.js" async></script>
Notes
Set the height in the snippet (e.g. height:420px) or wrap the embed in a div with your own height.
Add your Webflow domain to the map's allow-list in the Tint dashboard so the embed renders on your site.
The map is responsive and lazy-loaded, so it will not slow down your page.
Make your map look like your brand.
Free plan, no card required. Your first branded map takes about three minutes.