Integrate OpenStreetMap in Bubble as a free alternative to Google Maps by embedding a Leaflet.js map via an HTML element. No API key is required. Add markers from your database by passing coordinates to the HTML element, and handle click events to display location details. OpenStreetMap tiles are free for reasonable usage.
Integrate OpenStreetMap in Bubble
This tutorial shows how to add a free, open-source map to your Bubble app using OpenStreetMap and Leaflet.js, without Google Maps API costs.
Prerequisites
- A Bubble account with an active app
- Data with geographic coordinates (latitude/longitude)
- Basic understanding of HTML elements in Bubble
Step-by-step guide
Add an HTML Element for the Map
Add an HTML Element for the Map
In the Design tab, add an HTML element where you want the map. Set its size (e.g., 100% width, 400px height). In the HTML content, add: Leaflet CSS link, Leaflet JS script, a div with an ID for the map, and initialization JavaScript that creates the map centered on your default location.
1<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />2<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>3<div id="map" style="width:100%;height:400px;"></div>4<script>5 var map = L.map('map').setView([40.7128, -74.0060], 13);6 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {7 attribution: '© OpenStreetMap contributors'8 }).addTo(map);9</script>Expected result: An OpenStreetMap displays in your Bubble page.
Add Dynamic Markers from Database
Add Dynamic Markers from Database
Pass location data from Bubble to the HTML element using dynamic expressions. Create a JavaScript function that receives coordinates and adds markers. Use Bubble's 'Run JavaScript' action via Toolbox plugin to add markers dynamically after the page loads, passing coordinates from your database search.
Expected result: Map shows markers for database locations.
Handle Marker Click Events
Handle Marker Click Events
Add click event listeners to markers that display a popup with location details (name, address, rating). Use Leaflet's bindPopup method on each marker. For deeper interaction, use the JavaScript to Bubble element to send clicked marker data back to Bubble for displaying in a side panel.
Expected result: Clicking markers shows popups with location information.
Customize Map Appearance
Customize Map Appearance
Change the tile layer for different map styles: use Stamen terrain tiles, CartoDB dark theme, or Mapbox custom styles. Adjust default zoom level, add zoom controls, and enable/disable features like scroll zoom and dragging.
Expected result: Map matches your app's visual style.
Complete working example
1HTML ELEMENT CONTENT:2<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />3<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>4<div id="osm-map" style="width:100%;height:400px;"></div>5<script>6 var map = L.map('osm-map').setView([40.7128, -74.0060], 13);7 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {8 attribution: '© OpenStreetMap contributors',9 maxZoom: 1910 }).addTo(map);11 12 // Add marker function (called from Bubble)13 window.addMapMarker = function(lat, lng, title, desc) {14 L.marker([lat, lng]).addTo(map)15 .bindPopup('<b>' + title + '</b><br>' + desc);16 };17 18 // Auto-fit bounds function19 window.fitMapBounds = function(bounds) {20 map.fitBounds(bounds);21 };22</script>2324BUBBLE WORKFLOW:251. Page loaded → Run JavaScript for each location:26 window.addMapMarker(lat, lng, name, address);272. Marker clicked → Popup shows → Optional: send data to Bubble via bubble_fn_Common mistakes when integrating OpenStreetMap in Bubble
Why it's a problem: Not including the Leaflet CSS stylesheet
How to avoid: Always include the Leaflet CSS link before the JavaScript.
Why it's a problem: Initializing the map before the DOM is ready
How to avoid: Wrap initialization in a DOMContentLoaded listener or place the script after the map div.
Why it's a problem: Not adding attribution for OpenStreetMap
How to avoid: Include attribution in the tile layer options: '© OpenStreetMap contributors'.
Best practices
- Always include OpenStreetMap attribution as required by their license.
- Load Leaflet from a CDN for fast delivery.
- Use the Toolbox plugin's Run JavaScript to pass Bubble data to the map.
- Add clustering for maps with many markers using the Leaflet MarkerCluster plugin.
- Set appropriate default zoom and center for your app's geographic focus.
- Test map rendering on mobile — set touch-friendly zoom and dragging.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a free map to my Bubble.io app using OpenStreetMap instead of Google Maps. How do I embed a Leaflet.js map with dynamic markers from my database? No API key should be needed.
Add an OpenStreetMap using Leaflet.js in an HTML element. Show markers for all Store locations from the database with name and address popups on click.
Frequently asked questions
Is OpenStreetMap really free?
Yes. OpenStreetMap tiles are free for reasonable usage. For high-traffic apps (millions of tile requests), consider hosting your own tile server or using a commercial provider like Mapbox.
Does OpenStreetMap work as well as Google Maps?
For displaying maps and markers, yes. OpenStreetMap lacks some Google features like Street View, advanced routing, and Places autocomplete. For basic maps, it is an excellent free alternative.
Can I add routing/directions?
Yes. Use the OSRM (Open Source Routing Machine) API for free routing, or Mapbox Directions API for more features.
How do I geocode addresses to coordinates?
Use the Nominatim API (free, rate-limited) or Mapbox Geocoding API to convert addresses to latitude/longitude.
Can I use custom map styles?
Yes. Use alternative tile providers like Stamen, CartoDB, or Mapbox for different visual styles. Change the tileLayer URL to switch providers.
Is the HTML element approach performant?
Yes for most use cases. For maps with hundreds of markers, add the Leaflet MarkerCluster plugin. For complex mapping needs, RapidDev can implement optimized map solutions.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation