[Plugin Update 11 Mar 2020] Google Maps (bdk)

Hello Bubblers,

We have a new addition to the Bubble Developer Kit :smiley:

Google Maps (bdk): An extended version of google maps with extensive marker support, styling and customization capabilities. Build maps like Airbnb with useful marker icons. Dynamically update markers in real-time for each customer of your 1/2/3/4/5 - sided marketplace. Or just apply funky styles to make that map visually appealing.

Features include:

  1. Types: Terrain,satelite,roadmap,hybrid

  2. Action controls: Set initial center & zoom controls. Change anytime or pan to another address via workflow action

  3. Layers: Add traffic, transit & bike layers on top of your map dynamically

  4. Styles: Choose from hundreds of map themes (e.g. night mode, assassin’s creed, Uber) online and apply in a single paste of text

  5. Multiple marker sets:

    • Add upto 5 sets of markers
    • Each marker set can have different data source
    • Select address, label, icon, info window for each marker set
    • Each set can have its own default marker icon
    • Each marker itself is fully customizable - icon, label, location & infowindow text
  6. Marker custom icons:

    • Define default icon for each marker set
    • Customize individual marker icons via data source field. If empty, automatically switches to marker set’s default icon
  7. Marker Info windows: Customize the content that shows up in the info window that pops up, on every single marker (html accepted).

  8. Visible markers: Automatically outputs all visible markers that the user can see, for each marker set

  9. Custom controls: Choose which controls are displayed on map - fullscreen, zoom, map type, street view etc.

  10. Marker workflows: Trigger workflows on any click of any marker. Also use the corresponding data in your workflow

Demo here.
Editor here .
Or see the demo gif recordings & setup walkthrough video in the below post!

Happy Bubbling,
Cheers,
Gaurav

21 Likes

Fantastic work!

1 Like

Multiple marker sets

Custom Info Windows and Marker click workflows

Outputs live visible markers data among other things

Workflows to pan, center and zoom

Super easy setup

9 Likes

Awesome! Now can you build something similar for pdf’s? :grinning:

1 Like

Will your plugin provide directions between markers with waypoints?

2 Likes

That’s great Gaurav.
One thing that I think is missing in all maps plugins here is the ability to use Cluster. I have a user database where I would love to display the number of users on specific cities and the when you click expands with all the users there.
Is this option coming on this plugin?
Thank you!

3 Likes

Nice work @gaurav is it possible to add a geojson set of data

Interesting. I can see that being pretty useful. I’ll look to implement this. Thanks for the suggestion @caioprezia! :slight_smile:

@peter8 not at the moment but I’d love to understand the most common use-cases of this feature. Will try to implement corresponding to those

Thanks @horlartom2013! not at the moment but I’ll look into it

Thank you @Taiheta! :smiley:

Haha thanks!
By pdf’s you mean some new plugin? If yes, do DM me!

3 Likes

Hi @gaurav, The native Google Maps ellement in Bubble has a dynamic zoom based on the loaded data. Is this possible with this plug-in?

Hi @mike_verbruggen, the plugin element has a ‘initial zoom level’ which you can set to a dynamic expression

Hello Gaurav,

I am also looking for a way to dynamically change the zoom level. I have a slider which allows to filter interesting locations between 1 and 200 km away from the user’s actual position.
How would you write an expression to re-map the 1-200 range to a 14-6 range (which would be the zoom values I need)?

1 Like

The plugin element includes ‘Set zoom’ Element action which allows you to change the zoom level. There are other actions too like ‘set center’ and ‘pan to location’ which you may also find useful.

Do check out the Demo 2 in the plugin’s demo page

1 Like

Thank you Gaurav. The ‘Set zoom’ Element is helpful.

But I am not sure how to map a 14-8 range (zoom steps values which I would need) to a slider value range of 1-200 when the mapping should be not linear, but exponential or like a curve. A linear mapping is easy to achiev via an expression (used the Toolkit Plugin for this). But I am not sure about a nonlinear mapping, though.

Or is there a “zoom map to cover all visible pins” function integrated already?

Hmm this is not integrated but I can see its’ a pretty neat idea :smiley: just like the marker clustering idea. I’m adding it to the list of things I need to update for this plugin. Hopefully in the next update (no ETA yet) I will make this available

1 Like

I’m adding it to the list of things I need to update for this plugin

Yeah. Thank you!!! :smiley:

Hello Gaurav,
I am sorry for bothering you again. You mentioned that there is a list of things which you will implement to the maps plugin.

This here is something I would love to see:

It would be great if it is possible to change the marker Icon on “Mouse over”. And not only the Marker Icon/Color, but also trigger the little sticky note above it. At the moment, I do only find a
“…Marker 1 `clicked…” workflow element.

Would be great if hovered/mouse-over marker could trigger a condition on other elements (like the red color effect on the RG) and vice versa.

Hello there, I enjoyed very much so far using the plugin. just trying right now to set the zoom controls to a different corner. I tried via some added javascript in head tag but cannot figure out, how the map object is called to set options later. I tried with map.setOptions({
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
});

Any idea how i could manipulate still the map in more details than what plugin offers so far?

Hi @jonas.kwaschik you won’t be able to call the map object as its internal to the plugin.
I will add the zoom control position as one of the the settings you change in the plugin in the next update so that you won’t need to write any code to do this

@gaurav Having some issues with the plugin not loading in the previewer

Would it be possible use dynamic data for the custom style ? I have a requirement to add dark mode and accessibility (visual impairment) for example just drop in a option for color based on user settings