Plugins
Templates
Template Setup Guides

Bubble's Google Map Extender Plugin

Link to plugin page: https://zeroqode.com/plugin/bubble's-google-map-extender-1542622852689x155374801563418620

Introduction

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.

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 own custom domain to 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.

Settings for Google Map and Google Geocode APIs

Plugin Fields:

1. Google Map ID - put in your google map element id.

2. Initial Latitude - put in initial latitude.

3. Initial Longitude - put in initial longitude.

4. Initial Zoom - put in initial zoom.

Plugin States:

1. Map as URL - returns current map position as google maps url.

2. Mileage - returns traveled route.

Plugin Events:

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.

Plugin Actions:

1. Get Map as URL - used for refresh 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).

4. 3D Map - used for displaying a place from the map in 3D if place have 3D imagery.

5. Track User - used for start tracking current position real time.

6. Stop tracking user - used for stop tracking.

7. Add Directions - used for drawing best route between two points.

8. Draw Previous Route - used for drawing to the map previous saved routes (Mileage State).

9. Reset Map - used for reset the map to initial conditions.

Demo to preview the settings