How to integrate OpenStreetMap in Bubble

You integrate OpenStreetMap in Bubble by using a plugin that displays OSM tiles (the easiest way), or by embedding a Leaflet.js map inside an HTML element (the most flexible way). Bubble does not have a native OSM element, so you either install a plugin from the Bubble Plugin Marketplace or manually embed OSM with HTML + JavaScript.

Two Working Approaches

Approach 1 – Use a Bubble plugin (beginner‑friendly)

• Go to the Plugins tab → click Add Plugins.
• Search for: OpenStreetMap, Leafy Maps, or Leaflet Maps.
• Install one of the plugins that clearly states it uses OSM tiles (these are real plugins).
• Drag the plugin's map element onto your page like a normal Bubble Map element.
• Set fields such as Center latitude/longitude, Zoom level, and List of markers.

This works out of the box and keeps everything Bubble‑native (markers, workflows on click, dynamic locations).

Approach 2 – Manual embed with Leaflet.js

This gives you full control. You create an HTML element in Bubble and load Leaflet, which is a popular open‑source JS library built for OpenStreetMap.

• Add an HTML element to the page.
• Paste working Leaflet code inside it.
• You can use Bubble dynamic data by inserting Current User's ... fields directly in the code.

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<div id="mapid" style="height:400px;"></div>

<script>
// Initialize map
var map = L.map('mapid').setView([51.505, -0.09], 13);

// Load OSM tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap'
}).addTo(map);

// Add marker example
L.marker([51.505, -0.09]).addTo(map);
</script>

Which method should you choose?

Choose a plugin if you want speed, less code, and easy integration with Bubble’s workflows. Choose the HTML + Leaflet method if you need custom UI, clustering, custom icons, or advanced map behavior. Both options are valid and commonly used in real Bubble apps.