🗺️ Add Google Maps to your Bubble native mobile app, with custom markers, clustering, live GPS location, place search and driving routes, all controlled from workflows.
Markers come straight from your database as pins, dots, price labels or photos. Routes can come from fields, from a workflow, or from the user tapping the start and end points on the map. Everything the map does is exposed as states and events.

Demo: https://plugins-demo-2.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=google_maps
Editor: https://bubble.io/page?id=plugins-demo-2&test_plugin=1789321438057x366880057430900740_current&tab=Design&name=google_maps&type=page&elements=bTGSg

────────────────────────────────
✨ FEATURES
────────────────────────────────

🗺️ Base map

• Google Maps API key, starting centre (Bubble address or latitude/longitude), zoom, tilt and rotation
  
• Map types: roadmap, satellite, hybrid and terrain
  
• Gestures: one finger, two fingers (for maps inside scrolling pages) or locked, with rotation and tilt on or off
  
• Label language, or follow the phone
  
• Size and rounded corners taken from the element in the Bubble editor
  

📍 Markers

• Markers from a Bubble list: addresses or coordinates, with ids, titles, descriptions and photos
  
• Add, update, move and remove markers by ID from workflows
  
• Four styles: pin, dot, price label (Airbnb style) and round photo
  
• Custom icon image and a colour per marker
  
• Info popup on tap: a card that slides up, or a bubble over the marker
  
• Clustering when many markers are close together
  
• Markers glide smoothly to a new position, for live delivery tracking
  

🎨 Styles

• Custom JSON style (Snazzy Maps)
  
• Google Cloud Map ID
  
• Hide Google's shops and landmarks for a clean map
  
• Live traffic layer
  

🎛️ Controls and camera

• Zoom buttons and a "centre on my location" button, each one optional
  
• A compass that appears when the map is rotated
  
• Actions: move the camera, set the zoom, fit all markers, reset the map, lock or unlock movement
  

🛰️ GPS location

• Blue dot with accuracy circle and direction of travel
  
• Real-time tracking with three accuracy levels, from GPS every second to battery friendly
  
• Follow mode: the camera stays with the user
  
• Location is never requested on page load unless you turn it on
  
• Permission status: granted, denied, undetermined or unavailable
  

📐 Data layers

• Paths, polygons and circles (zones)
  
• GeoJSON layer, from a URL or from text
  

🚗 Routes

• Start and destination by address or by coordinates. An empty start uses the user's location
  
• The user can pick the start and destination directly on the map with a finger, and drag them to adjust. The route recalculates automatically
  
• Distance and estimated driving time, as numbers and ready-to-show text, plus start and destination addresses
  
• Avoid tolls or highways, optional live traffic
  
• Route line with custom colour and width, automatic zoom to show the whole route, and a time and distance summary on the map
  
• Straight-line distance between two points (free, no API)
  
• "Open in Google Maps, Waze or Apple Maps" action for turn-by-turn navigation, with start point and destination
  

🔎 Search and addresses

• Search bar with place suggestions as you type, optionally limited to some countries
  
• Address to coordinates and coordinates to address, using the phone's free geocoder first
  

────────────────────────────────
🔧 WORKFLOW ACTIONS (30)
────────────────────────────────

Add Marker · Update Marker · Remove Marker · Clear Markers · Select Marker · Close Popup · Move Camera · Set Zoom · Fit All Markers · Reset Map · Set Map Type · Set Map Style · Set Map Interaction · Start Tracking · Stop Tracking · Get Current Location · Center On User · Calculate Route · Clear Route · Measure Distance · Open In Maps App · Geocode Address · Reverse Geocode · Draw Path · Draw Polygon · Draw Circle · Remove Shape · Clear Shapes · Load GeoJSON · Clear Search

────────────────────────────────
📡 EXPOSED STATES (33)
────────────────────────────────

Is ready · Last error · Camera latitude · Camera longitude · Camera zoom · Tapped latitude · Tapped longitude · Selected marker id · Marker ids · Marker count · User latitude · User longitude · User accuracy · User speed · Is tracking · Location permission · Route distance · Route distance text · Route duration minutes · Route duration text · Route origin address · Route destination address · Route origin latitude · Route origin longitude · Route destination latitude · Route destination longitude · Straight distance · Straight distance text · Place name · Place address · Place latitude · Place longitude · Place id

────────────────────────────────
📣 EVENTS (14)
────────────────────────────────

Map ready · Map error · Map tapped · Camera moved · Marker tapped · Popup tapped · Markers changed · Location updated · Location permission granted · Location permission denied · Route calculated · Route failed · Place selected · Geocode completed


📄 Documentation: https://wide-finch-c12.notion.site/Google-Maps-Plugin-Documentation-3db61f4cca3a80e7af12ebaedc48d780?pvs=73
✉️ Support: info@technocode.agency