How to embed Google Maps in Bubble

Drag a Map element from the Element Palette onto your page. Set its data source to a search that returns records with geographic address fields (e.g., Do a Search for Locations). Set the marker address field to the geographic address field on your Data Type. The Map element automatically places markers for each result. Set the map's initial center to a specific address or Current geographic position. Configure zoom level in the element properties. This is the fastest way to get a working map.

For more control over map styling and behavior, use an HTML element with the Google Maps JavaScript API. Add an HTML element and paste a script that creates a google.maps.Map instance. Set the container div size, center coordinates, zoom level, and map style. The HTML approach lets you use custom marker icons, styled map themes (like dark mode), info windows with rich content, marker clustering, and custom controls that are not available through the native Map element.

1<div id="map" style="width:100%;height:400px;"></div>
2<script>
3function initMap() {
4  var map = new google.maps.Map(document.getElementById('map'), {
5    center: {lat: 40.7128, lng: -74.0060},
6    zoom: 12,
7    styles: [] // Add custom style array here
8  });
9  // Add markers dynamically
10}
11initMap();
12</script>

For the native Map element, markers are added automatically from the data source. For the HTML approach, you need to pass Bubble data to the JavaScript. One method: store location data in a hidden Repeating Group, then use JavaScript to read the rendered data and create markers. Another method: use the Toolbox plugin's Run JavaScript action to create markers from workflow data. Each marker can have a custom icon URL, title, and click handler that shows an info window.

Google Maps supports custom styling via a JSON style array. Use the Google Maps Styling Wizard (mapstyle.withgoogle.com) to create a custom style — choose from presets like Dark, Retro, Night, or create your own by adjusting colors for roads, water, landmarks, and labels. Copy the generated JSON style array and paste it into the styles property of your Map initialization. For the native Map element, custom styling options are limited — the HTML approach is recommended for styled maps.