Demo to preview the settings

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.
Image without caption

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)

Changelogs

Update 13.09.23 - Version: 3.8.0

  • Minor updates

Update 25.10.23 - Version: 3.11.0

  • Minor fixes