Connect Google Maps with Webflow

Google Maps with Webflow

Webflow ships a map element, and it is fine until you want more than one pin. Anything driven by the CMS, styled to the brand, or clustered because there are forty locations needs the real API, which also means a key, a bill and a loading decision.

Book a call

Content work like this usually takes 2–5 days

What the integration covers

What syncs, and what needs a decision.

Wired up

Locations from a Webflow collection rather than pins placed by hand
Custom markers and a style that matches the site instead of Google's default
Clustering and bounds fitting, so forty locations do not become forty overlapping pins
A list and a map that stay in sync, with the list built from the same collection

Flagged upfront

Webflow's built-in map element takes one address and no CMS binding, so anything data-driven replaces it entirely
The API key sits in Webflow's client-side code where anyone can read it, so it is restricted by referrer or it will be used by someone else
Maps bill per load, and a map in the footer of every page bills on every page, so it loads on interaction
Geocoding addresses on each page load burns quota; the coordinates belong in the collection, written once

The Webflow map element is a single address in an iframe. It is the right answer for a contact page and the wrong one for anything with a collection behind it, because it cannot bind to CMS data at all.

The two things that catch people are both about cost. The API bills per map load, so a map sitting in a global footer bills on every page view whether or not anyone looks at it — the fix is to render a static image or a placeholder and load the real map when someone interacts. And geocoding an address into coordinates is a separate billable call, so doing it at render time means paying to convert the same address over and over. Those coordinates belong in the collection as fields, written once when the location is added.

The key itself deserves a sentence. Webflow has no server, so the key is in the page source and readable by anyone. That is expected and fine, provided it is restricted to your domain in the Google console. Unrestricted keys on public sites get found and spent.

Other integrations

Wire up something else?

Reach out and see if we are a good fit.

Start a conversation

Currently booking two to four weeks out.