Link to plugin page: https://bubble.io/plugin/google-map-1581415601088x755665661536239600
Demo to preview the settings
Live Demo: https://googlemaptest.bubbleapps.io/
Introduction
The plugin provides the ability to display Google Maps in different modes, add markers, customize markers, build routes, get info about place and more
Prerequisites
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.
Plugin Elements
GoogleMap Fields
Title | Description | Type |
mapType | -roadmap displays the default road map view. This is the default map type.
-satellite displays Google Earth satellite images.
-hybrid displays a mixture of normal and satellite views.
-terrain displays a physical map based on terrain information. | text |
centerLat | map center coordinates to pan to | number |
centerLon | map center coordinates to pan to | number |
zoom | zoom level: 0 - 23 | number |
disable default UI | do not show type, zoom and other controls
You can specify an initial list of markers or leave it empty. Please note that it’s not a good idea to use external API sources directly here (use element state to cache API response). Bubble things from DB could be used without restrictions. Markers will be updated synchronously with any update of the source. | static text |
data_type | bubble Data Type of the elements in the list, can be DB thing, API response object type etc | app |
markers_list | any list of data_type things as result of search, filtering, unioning etc | data |
id_field | set the field with unique identifier for any marker, we propose use “unique id” for DB things | field DB |
lat_field | fields with coordinates of marker, value should contain decimal degrees, markers with empty coordinates should be filtered out previously | field DB |
lon_field | fields with coordinates of marker, value should contain decimal degrees, markers with empty coordinates should be filtered out previously | field DB |
title | field with tooltip text, can be empty | field DB |
icon | field with url with image sticked to marker, can be empty | field DB |
infowindowcontent | field with any text or html to show by click | field DB |
iconcontent | field with any text to chow directly over the marker | field DB |
fit bounds of markers list | pan map and set its zoom level after adding all the markers (run once after initializing) | yes/no |
overrided_icon_markers_list | texts list with IDs of markers (according id_field) where icon should be replaced | text |
overrided_icon | new icon for overrided list | text |
click_icon | icon url to be shown on map by click on empty space | text |
follow position | use geolocation data and follow (continuously pan the map) | yes/no |
position_icon | icon url to be shown at geolocation position, can be blank to disable this feature | text |
timestamp | set to current datetime if you need to explicitly redraw the list of markers | date |
default_icon | icon url to be shown if no icon for the marker is specified other way | text |
GoogleMap Actions
AddStaticMarkers
Add marker to list (will stay till page refresh), id is generated on the fly.
Fields:
Title | Description | Type |
data_type | bubble Data Type of the elements in the list, can be DB thing, API response object type etc | app |
markers_list | any list of data_type things as result of search, filtering, unioning etc | data |
lat | fields with coordinates of marker | field DB |
lon | fields with coordinates of marker | field DB |
iconcontent | field with any text to chow directly over the marker | field DB |
title | field with tooltip text, can be empty | field DB |
infowindowcontent | field with any text or html to show by click | field DB |
icon | field with url with image sticked to marker, can be empty | field DB |
fit bounds | pan map and set its zoom level after adding all the markers (run once after initializing) | field DB |
RemoveAllObjects
Remove all objects from map, update will redraw the list from element options.
PanTo
Pan the map to specified coordinates.
Title | Description | Type |
latitude | Map Center (latitude) | number |
longitude | Map center (longitude) | number |
AddMultiRoute
Build the route from one point (ref1) to another (ref2).
Fields:
Title | Description | Type |
travel mode | DRIVING
BICYCLING
TRANSIT.
WALKING | text |
ref1_lat | Starting point of the route (latitude) | number |
ref1_lon | Starting point of the route (longitude) | number |
ref2_lat | The end point of the route (latitude) | number |
ref2_lon | The end point of the route (longitude) | number |
ref1_str | Starting point of the route (address) | text |
ref2_str | The end point of the route (address) | text |
routeStrokeWidth | Route line width | number |
routeStrokeColor | Route line color | text |
AddStaticMarker
Add marker.
Title | Description | Type |
lat | fields with coordinates of marker | number |
lon | fields with coordinates of marker | number |
iconcontent | field with any text to chow directly over the marker | text |
title | field with tooltip text, can be empty | text |
infowindowcontent | field with any text or html to show by click | text |
icon | field with url with image sticked to marker, can be empty | text |
fit bounds | pan map and set its zoom level after adding all the markers (run once after initializing) | text |
FitMarkers
Pan and zoom map so all the markers (or specified list of markers) become visible.
Title | Description | Type |
type | all,custom | text |
data_type | bubble Data Type of the elements in the list, can be DB thing, API response object type etc | app |
markers_list | any list of data_type things as result of search, filtering, unioning etc | data |
lat | fields with coordinates of marker | field DB |
lon | fields with coordinates of marker | field DB |
RemoveMarkers
Remove all markers from map, update will redraw the list from element options.
GoogleMap States
States:
Title | Description | Type |
clicked_lat | last empty space or poi coordinates clicked | number |
clicked_lon | last empty space or poi coordinates clicked | number |
clicked_placeid | placeid clicked (use provided GMAPS | Place Details to get details by this id) | text |
clicked_markerid | marker id clicked (id_field value) | text |
bounds_ne_lat | map bounds coordinates | number |
bounds_ne_lon | map bounds coordinates | number |
bounds_sw_lat | map bounds coordinates | number |
bounds_sw_lon | map bounds coordinates | number |
GoogleMap Events
Events:
Name | Description |
gmapready | map was initialized |
click | any click on map (empty space, poi or marker) |
pan | map was panned (bounds changed) |
