This plugin adds abilities to add layers, switch to 3d mode, track live, show directions, track route, display KML & more with bubble’s default map.
Note: In order to use the plugin, you'll need to place Map Element on Page and give it an ID Attribute for linking the map with Plugin Element. See below how to add an ID attribute to elements.
Google API Key (https://cloud.google.com/maps-platform/places/)
You'll need to enable Directions , Places API in Google Cloud Platform For users who are setting their application place your Google Map API and Google Geocode API keys in order to you use the plugin with a Map element in the Bubble application: Settings > General tab > General services api keys.
Tip: How to add ID attribute to HTML elements https://forum.zeroqode.com/t/how-to-add-id-attribute-to-html-elements/469
How to setup
I. Setting up Google Console Dashboard
Follow Bubble's manual for Maps setup - https://bubblegroup.gitbooks.io/bubble-manual/content/working-with-data/setting-up-google-api-keys.html
II. Setting up Bubble application in page editor
- After you've set Google Console and app API keys, place on page Map element and Map Extender element
2. Assign ID attribute to map element (ex: map1) , see description above how to expose ID attribute for an element
3. In Map Extender element propriety Google Map ID , place the ID attribute (ex: map1) to combine both elements
4. Done! Start using actions, states, events and element properties within your application.
Plugin Element proprieties
The plugin contains Map Extender visual element that should be used on page.
- Google Map ID - your google map element id.
- Initial Latitude - initial latitude to be used on the map.
- Initial Longitude - initial longitude to be used on the map.
- Initial Zoom - initial zoom for the map.
- Disable Default UI - checkbox; check it if you want to disable default Google maps UI.
- Map Type - dropdown; type of the map, available values: roadmap, satellite, hybrid, terrain
- Custom Style - (optional) custom styles to customize the map (https://snazzymaps.com).
- Marker Type - marker representation from your bubble database; should contain a field of type geographic address!!!
1. Geolocation is not supported - triggered when geolocation is not supported by the device.
2. Geolocation find is not allowed - triggered when user blocks his location tracking.
3. Directions Failed - triggered if directions failed.
4. Marker Clicked - triggered when a marker is clicked.
1. Get Map as URL (while tracking) - used for refreshing 'Map as URL' state.
2. Display KML File - used for displaying KML files with content.
3. Add Layer - used for adding additional layers to the map (Traffic Layer, Transit Layer, Bicycling Layer, Data Layer).
4. 3D Map - used for displaying a place from the map in 3D if the place has 3D imagery.
5. Track User - used to start tracking the current user position in real time.
6. Stop tracking user - used to stop tracking the current user position.
7. Add Directions - used for drawing best route between two points.
8. Draw Previous Route - used for drawing to the map a saved route (Mileage State).
9. Reset Map - used for resetting the map to initial conditions.
10. Add Marker(s) - used to add a marker or a set of markers to the page.
11. Toggle Markers Visibility - used to toggle markers visibility
12. Hide Layer - used to hide selected layer from the map.
13. Add Geo JSON - used to add a GeoJSON file to the map
14. Set Geo JSON Style By ID - used to set the style for GeoJSON by its id (fill color, stroke color, stroke weight)
15. Remove Geo JSON Style By ID - used to remove styles from a GeoJSON by its id
16. Remove Geo JSON By ID - used to remove GeoJSON (by its id) from the map
17. Remove All Geo JSON Files - used to remove all GeoJSON files from the map at once
1. Map as URL - returns current map position as google maps url.
2. Mileage - returns a travelled route.
3. Directions Distance - route distance in meters.
4. Directions Duration - route travelling time in seconds.
5. Latitude - Tracked latitude
6. Longitude - Tracked longitude
7. Last Clicked Marker - the marker that was last clicked
8. Added Geo JSON ID - id of the last Geo JSON file added by the user
- Example 'Add Directions' action settings
2. Example 'Track user' action settings
3. Example 'Add Geo JSON' action settings
Update: 11/27/2020 –
- Added Map Extender element actions:
- Hide Layer
- Add Geo JSON
- Set Geo JSON Style By ID
- Remove Geo JSON Style By ID
- Remove Geo JSON By ID
- Remove All Geo JSON Files - used to remove all GeoJSON files from the map at once
2. Added Map Extender element state:
- Added Geo JSON ID
3. Added 'Data layer' option to 'Add Layer' and 'Hide Layer' Map Extender element actionsUpdate: 22/06/2021, Version 1.26.0 -
- Fixed issue with displaying maps
Update: 24/08/2021, Version 1.30.0 -
- Added a new action "Add a list of markers" and a new option to use custom icons for this.
Update: 14/09/2021Improvement: Version: 1.31.0
- Added description to fields in the 'Add list of markers' action.
Update: 19/10/2021, Version 1.31.0
- Added event "map is loaded"
Update: 20/12/2021, Version 1.33.0
- Added new action show custom marker info popup
- Show marker info
In this action, we can address an earlier created group (which will be a popup for displayed information). Or we can create a popup, setting the height and width of the desired popup, in which we can upload the text or HTML, to display the required information.
- Close marker info
This action can be attached to any button or group, to close the displayed information popup.