Geocode Latitude
✅
Link to the plugin page: https://zeroqode.com/plugin/google-map-bubble-mobile-1781252511684x692936177376560500
Demo to preview the plugin:
✅
Introduction
A fully interactive Google Maps element for your Bubble native app, built on top of the Google Maps JavaScript API. It supports map configuration, custom styling, info popups, real-time GPS location tracking, and map controls - all accessible through Bubble states, events, and actions.
Prerequisites
This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/t65D5D6R
⚠️
Please note that the testing app is currently available for iOS only.
❗
Known Issue: Zoom & Scroll Sensitivity
The entire page may move when attempting to zoom or interact with the map. This results in unintended scrolling behavior that can affect the overall user experience.
At this time, this behavior cannot be fully resolved due to platform limitations.
How to setup
Step 1 – Add the Plugin Element to Your Page
- Open the Design tab in your Bubble editor.
- Search for the Mobile Google Map element in the Elements panel.
- Drag and drop the element onto your page.
Step 2 – Configure Properties
Select the element and configure its properties in the Property Editor like API Key, Initial Latitude/Longitude etc
Plugin Element - Mobile Google Map
A Google Maps element that embeds and controls an interactive map in Bubble Mobile, allowing location display, info popup management, GPS tracking, and real-time map state reporting.
Fields
Name | Description | Type |
API Key | Google Maps API key with Maps JS API enabled in GCP | Text |
Initial Latitude | Initial map center latitude | Number |
Initial Longitude | Initial map center longitude | Number |
Initial Zoom Level | Initial zoom level 1–22 | Number |
Map Type | Map style: roadmap, satellite, hybrid, or terrain | Dropdown |
Map ID | Cloud-based Google Map ID for advanced styling | Text |
Styles JSON | Snazzymaps / custom JSON style array string | Text |
Disable Default UI | Hides all default Google Maps controls | Yes/No |
Display Current Location | Displays current location position | Yes/No |
Enable Clustering | Group nearby markers into a single numbered bubble that splits apart as the user zooms in. Recommended above roughly 50 markers. | yes/no |
Cluster Radius | How close markers must be, in pixels on screen, to be grouped together. Larger values produce fewer, bigger clusters. | number |
Cluster Max Zoom | Zoom level above which clustering stops and every marker is shown individually. | number |
Cluster Min Points | Smallest number of markers that will form a cluster. Below this they are drawn individually. | number |
Show Traffic Layer | Overlays live traffic conditions on the map. Coverage varies by country. | yes/no |
Show Transit Layer | Overlays public transport lines and stations. Coverage varies by city. | yes/no |
Show Bicycling Layer | Overlays cycle paths and bike-friendly roads. Coverage varies by country. | yes/no |
Element Actions
Set Center
Pan map to coordinates
Name | Description | Type |
Lattitude | New lattiude coordinate to pan the map | Number |
Longitude | New longitude coordinate to pan the map | Number |
Set Zoom Level
Set map zoom level
Name | Description | Type |
Zoom Level | New zoom level to set the map | Number |
Reset Map
Full reset: clears all markers, routes, layers, camera
Center On Location
Center the map on the current location
Name | Description | Type |
Zoom Level | Zoom level to set when centering on current location | Number |
Add Marker
Add a custom marker to the map
Name | Description | Type |
Marker ID | ID of the marker to add | Text |
Latitude | Lattitude coordinate of the marker | Number |
Longitude | Longitude coordinate of the marker | Number |
Title | Title of the marker | Text |
Load GeoJSON
Loads a GeoJSON dataset onto the map as a layer. Accepts a URL or the GeoJSON pasted directly. Fires Layer Loaded on success and publishes the layer's ID to Last Layer ID.
Name | Description | Type |
GeoJSON Source | A URL pointing to a GeoJSON file, or the GeoJSON itself pasted in. The plugin detects which by the first character. A URL must be publicly reachable and serve CORS headers, since the device fetches it directly. | Text |
Layer ID | Your own name for this layer, so Remove Layer can target it later. Loading again with the same ID replaces the previous layer. Generated automatically if left blank. | text |
Fill Color | Fill colour for polygons. | color |
Fill Opacity | Fill transparency from 0 (invisible) to 1 (solid). | number |
Stroke Color | Outline colour for polygons and lines. | color |
Stroke Width | Outline thickness in pixels. | number |
Fit To Bounds | Move and zoom the map so the whole layer fits on screen once loaded. | yes/no |
Load KML
Loads a KML or KMZ file onto the map as a layer. Fires Layer Loaded on success and publishes the layer's ID to Last Layer ID.
Name | Description | Type |
KML URL | Public URL of a .kml or .kmz file. Google's servers fetch and render it, not the device, so the URL must be reachable from the public internet — a private or localhost address will fail. Pasted KML text is not supported. | text |
Layer ID | Your own name for this layer, so Remove Layer can target it later. Loading again with the same ID replaces the previous layer. Generated automatically if left blank. | text |
Fit To Bounds | Move and zoom the map so the whole layer fits on screen once loaded. | yes/no |
Suppress Info Windows | Stop Google's built-in popup from opening when a KML feature is tapped. Turn this on if you want to handle taps yourself. | yes/no |
Remove Layer
Removes GeoJSON and KML layers from the map, either one by ID or all at once.
Name | Description | Type |
Layer ID | ID of the layer to remove, as given when it was loaded. Ignored when Remove All Layers is on. | text |
Remove All Layers | Remove every loaded GeoJSON and KML layer at once. When on, the Layer ID field is ignored. | yes/no |
Get Directions
Calculates a route and draws it on the map. Distance, duration and the encoded path are published to states, and Route Ready fires. Uses the Directions API, which is billed separately from the map.
Name | Description | Type |
Origin | Where the route starts. An address as text, or coordinates in the form "48.85, 2.29". | text |
Destination | Where the route ends. An address as text, or coordinates in the form "48.85, 2.29". | text |
Waypoints | Stops between origin and destination, separated by the | character. Each can be an address or "lat, lng". Waypoints increase the cost of each request. | text |
Travel Mode | How the route is calculated: DRIVING, WALKING, BICYCLING or TRANSIT. Transit is not available in every region. | dropdown |
Optimize Waypoints | Let Google reorder the waypoints for the shortest overall route. Leave off to visit them in the order given. | yes/no |
Show Route On Map | Draw the route on the map. Turn off to get the distance and duration into states without drawing anything. | yes/no |
Suppress Default Markers | Hide the A and B pins Google adds at each end of the route, so you can use your own markers instead. | yes/no |
Stroke Color | Colour of the route line. | color |
Stroke Width | Thickness of the route line in pixels. | number |
Fit To Bounds | Move and zoom the map so the whole route fits on screen. Turn off to keep the current view. | yes/no |
Clear Directions
Removes the route currently drawn on the map. The route states keep their last values. This action has no fields.
Geocode Address
Converts an address into coordinates. The result is published to the Geocode states and Geocode Completed fires. Only the best match is returned. Uses the Geocoding API, which is billed separately from the map.
Name | Description | Type |
Address | The address or place name to look up, for example "1600 Amphitheatre Parkway, Mountain View". | text |
Region Code | Two-letter country code, such as "md", that biases results towards that country. It is a preference, not a filter — results elsewhere are still possible. | text |
Language Code | Language for the returned address, such as "ro" or "ru". Defaults to the device language. | text |
Reverse Geocode
Converts coordinates into a street address. The result is published to the Geocode states and Geocode Completed fires. Only the closest match is returned. Uses the Geocoding API, which is billed separately from the map.
Name | Description | Type |
Latitude | Latitude of the point to look up. | number |
Longitude | Longitude of the point to look up. | number |
Language Code | Language for the returned address, such as "ro" or "ru". Defaults to the device language. | text |
Distance Matrix
Calculates travel distance and time between several origins and destinations at once. The full result is published as JSON to Matrix Result JSON, the first pair also to the individual states, and Distance Matrix Ready fires. Uses the Distance Matrix API, which is billed separately from the map.
Name | Description | Type |
Origins | One or more starting points separated by the | character. Each can be an address or "lat, lng". | text |
Destinations | One or more end points separated by the | character. Each can be an address or "lat, lng". | text |
Travel Mode | How travel time and distance are calculated: DRIVING, WALKING, BICYCLING or TRANSIT. Transit is not available in every region. | dropdown |
Exposed states
Name | Description | Type |
Error Message | Last error string, populated whenever an internal error occurs | Text |
Current Device Latitude | Current GPS latitude of the device, updated on each location change | Number |
Current Device Longitude | Current GPS longitude of the device, updated on each location change | Number |
Tapped Latitude | Latitude of the last point tapped on the map | Number |
Tapped Longitude | Longitude of the last point tapped on the map | Number |
Current Center Latitude | Latitude of the current map center | Number |
Current Center Longitude | Longitude of the current map center | Number |
Location Permission Status | Indicates the status of the location permission | Text |
Geocode Latitude | Latitude of the geocoding result. Filled by both Geocode Address and Reverse Geocode, and updated just before Geocode Completed fires | number |
Geocode Longitude | Longitude of the geocoding result. Filled by both Geocode Address and Reverse Geocode, and updated just before Geocode Completed fires | number |
Geocode Address | The full formatted address of the result, as Google writes it for the requested language. After Reverse Geocode this is the street address closest to the coordinates you supplied; after Geocode Address it is Google's tidied-up version of what you typed | text |
Geocode Place ID | Google's permanent identifier for the matched place. Store it to look the same place up again later, or to pass it to other Google Places services — it is more reliable than storing an address, which can change | text |
Element Events
Name | Description |
Map Ready | Triggered when the WebView map finishes initialising and is ready to use |
Error Occurred | Triggered when an internal error is caught and the error message state is updated |
Location Updated | Triggered when a new GPS position is received and the current latitude and longitude states are updated |
Geocode Completed | A geocode or reverse geocode returned a result |
Route Ready | A route was calculated and the Route states are filled |
Distance Matrix Ready | A matrix was calculated |
Layer Loaded | A GeoJSON or KML layer finished loading and Last Layer ID is set |
Workflow example
Set Map Zoom Level
Use this workflow to set the zoom level of map element.
- Create a workflow that calls the “Set Zoom” action and set the desired zoom level
The selected element should now zoom in based on the level set.
Set Map Center
Use this workflow to pan map element to coordinates.
- Create a workflow that calls the “Set Center” action and set the desired coordinates
The selected element should now center based on the coordinates set.
Add Marker
Use this workflow to add markers on the map element.
- Create a workflow that calls the “Add Marker” action and set the desired coordinates
The desired marker should be displayed on the map based on the coordinates set.
Show a Route Between Two Points
Use this workflow to draw a route on the map and read back its distance and duration.
- Create a workflow that calls the Get Directions action.
- Set Origin and Destination. Each accepts either an address as text, or coordinates in the form
47.0245, 28.8323.
- Optionally set Travel Mode, and add stops in Waypoints separated by the
|character.
- To display the results, add two text elements bound to the map's Route Distance Text and Route Duration Text states.
The route is drawn on the map, the camera frames it, and the Route Ready event fires once the results are available. Run Clear Directions to remove the line.
Get Directions uses the Directions API, which must be enabled on your key separately from Maps JavaScript API.
Load a GeoJSON Layer
Use this workflow to display your own geographic data — delivery zones, districts, service areas — on top of the map.
- Create a workflow that calls the Load GeoJSON action.
- In GeoJSON Source, paste either a public URL to a GeoJSON file or the GeoJSON itself. The plugin detects which.
- Set Layer ID to a name of your own, for example
delivery_zones, so you can remove it later.
- Adjust Fill Color, Fill Opacity, Stroke Color and Stroke Width to suit your design.
The layer is drawn on the map and, with Fit To Bounds on, the camera moves to frame it. The Layer Loaded event fires and the layer's ID is published to Last Layer ID.
To remove it, call Remove Layer with the same Layer ID, or turn on Remove All Layers to clear everything at once.
If you supply a URL, it must be publicly reachable and serve CORS headers, since the device fetches it directly. Note that GeoJSON stores coordinates as
[longitude, latitude] — the opposite order to the rest of the plugin.Find Coordinates From an Address
Use this workflow to turn a typed address into coordinates and move the map there.
- Create a workflow that calls the Geocode Address action, with Address set to your input element's value.
- Add a second step in the same workflow: Set Center, with Latitude and Longitude bound to the map's Geocode Latitude and Geocode Longitude states.
Because geocoding is asynchronous, the states are not filled by the time the second step runs. Instead, create a separate workflow on the map's Geocode Completed event and put Set Center there.
The formatted address Google matched is published to Geocode Address, and its permanent identifier to Geocode Place ID — store that rather than the address if you need to look the same place up later.
Reverse Geocode works the same way in the opposite direction: give it Latitude and Longitude and read the address from the same states.
Changelogs
Update 19.08.26 - Version 1.3.0
- Bubble Plugin Page Update (Description).
Update 11.08.26 - Version 1.2.0
- Fixed Android map gestures and optimized performance by eliminating redundant re-renders and external script reloads.
Update 01.07.26 - Version 1.1.0
- Bubble Plugin Page Update (Description).
Update 09.06.26 - Version 1.0.0
- Initial Plugin Release.