How to embed Google Maps in Bubble

The most practical way to embed Google Maps in Bubble is to use Bubble’s built‑in Google Maps element with a valid Google Maps API Key. You drag the Map element onto the page, paste your API key into Settings → API, and then set the map’s data source (address or Geographic Address) in the element inspector.

Two Ways to Embed Google Maps

Bubble gives you two real, reliable options: the built‑in Map element (recommended) or embedding a custom Google Map iframe.

• Use Bubble’s Google Map element if you want dynamic markers, pulling locations from your Bubble database, or showing current user's location.
• Use iframe Embed if you already have a generated Google Map embed link or you don’t need dynamic Bubble data.

Using Bubble’s Built‑In Google Map

This is the easiest and the method most Bubble apps use.

• Go to Settings → API and paste your Google Maps API key into “Google Map API Key”.
• Drag the Map element from the Visual Elements section onto your page.
• Set the Center address or bind it to a Geographic address field from your database.
• For markers, set List of markers = Do a search for… (must be geographic type).

Bubble automatically loads the Google Maps script using your key, so no extra setup is required.

Embedding Google Maps Using an iframe

If you only need a static Google Maps embed (like “show this location”), use the HTML element.

<div style="width:100%; height:300px;">
  <iframe
    width="100%"
    height="100%"
    style="border:0"
    loading="lazy"
    allowfullscreen
    src="https://www.google.com/maps/embed?pb=!1m18!...YOUR_EMBED_CODE_HERE...">
  </iframe>
</div>

You get the embed code from Google Maps → Share → Embed map.

When to Use Which

• Need dynamic addresses from your database? Use Bubble’s Map element.
• Only showing a simple one-off map? iframe is faster.
• No API key available? iframe still works.