📎

Link to plugin page: https://bubble.io/plugin/google-map-1581415601088x755665661536239600

Demo to preview the settings

✅

Bubble Editor: https://bubble.io/page?type=page&name=index&id=googlemaptest&tab=tabs-1

✅

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

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.

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)

Google Map