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

**URL:** <https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454>\
**Category:** Plugins\
**Created:** [October 3, 2019, 6:17pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454 "2019-10-03T18:17:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![gaurav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaurav/32/6666_2.png) [@gaurav](https://forum.bubble.io/u/gaurav)\
**Post date:** [October 3, 2019, 6:17pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/1 "2019-10-03T18:17:55Z")

</div>

Hello Bubblers,

We have a new addition to the [Bubble Developer Kit](https://www.notion.so/Bubble-Developer-Kit-Plugins-3eb057d9d81d4176b1be678856c80faf#2768ebdb0b1c43d78689c7b27c726130) 😃

[Google Maps (bdk)](https://bubble.io/plugin/google-maps-bdk-1569324802126x167335311931867140): 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:

6. Marker custom icons:

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](https://bdkdemos.bubbleapps.io/bdk_google_maps).  
[Editor here](https://bubble.is/page?version=live&type=page&name=bdk_google_maps&id=bdkdemos&tab=tabs-1).  
Or see the [demo gif recordings](https://www.notion.so/Bubble-Developer-Kit-Plugins-3eb057d9d81d4176b1be678856c80faf#91538e7a61c448f6932fc77216a5259d) & [setup walkthrough video](https://www.notion.so/Bubble-Developer-Kit-Plugins-3eb057d9d81d4176b1be678856c80faf#291167f540bf46cf9b5c6377d8285037) in the below post!

Happy Bubbling,  
Cheers,  
[Gaurav](https://thebdk.com/)

---

<div class="post-metadata">

**Author:** ![Taiheta](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/taiheta/32/65061_2.png) [@Taiheta](https://forum.bubble.io/u/Taiheta)\
**Post date:** [October 3, 2019, 6:20pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/2 "2019-10-03T18:20:20Z")

</div>

Fantastic work!

---

<div class="post-metadata">

**Author:** ![gaurav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaurav/32/6666_2.png) [@gaurav](https://forum.bubble.io/u/gaurav)\
**Post date:** [October 3, 2019, 7:45pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/3 "2019-10-03T19:45:24Z")

</div>

**Multiple marker sets**

[![](https://gauravbschooltest.s3.ap-south-1.amazonaws.com/multiple+marker+sets.gif) ](https://gauravbschooltest.s3.ap-south-1.amazonaws.com/multiple+marker+sets.gif)

**Custom Info Windows and Marker click workflows**

[![](https://gauravbschooltest.s3.ap-south-1.amazonaws.com/info+windows.gif) ](https://gauravbschooltest.s3.ap-south-1.amazonaws.com/info+windows.gif)

**Outputs live visible markers data among other things**

[![](https://gauravbschooltest.s3.ap-south-1.amazonaws.com/visible+markers.gif) ](https://gauravbschooltest.s3.ap-south-1.amazonaws.com/visible+markers.gif)

**Workflows to pan, center and zoom**

[![](https://gauravbschooltest.s3.ap-south-1.amazonaws.com/map+actions.gif) ](https://gauravbschooltest.s3.ap-south-1.amazonaws.com/map+actions.gif)

**Super easy setup**

---

<div class="post-metadata">

**Author:** ![gnelson](https://avatars.discourse-cdn.com/v4/letter/g/6bbea6/32.png) [@gnelson](https://forum.bubble.io/u/gnelson)\
**Post date:** [October 3, 2019, 8:41pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/4 "2019-10-03T20:41:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![peter8](https://avatars.discourse-cdn.com/v4/letter/p/ee7513/32.png) [@peter8](https://forum.bubble.io/u/peter8)\
**Post date:** [October 3, 2019, 9:07pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/5 "2019-10-03T21:07:54Z")

</div>

Will your plugin provide directions between markers with waypoints?

---

<div class="post-metadata">

**Author:** ![canadianapps](https://avatars.discourse-cdn.com/v4/letter/c/f14d63/32.png) [@canadianapps](https://forum.bubble.io/u/canadianapps)\
**Post date:** [October 3, 2019, 10:02pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/6 "2019-10-03T22:02:03Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![horlartom2013](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@horlartom2013](https://forum.bubble.io/u/horlartom2013)\
**Post date:** [October 4, 2019, 9:32am UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/7 "2019-10-04T09:32:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gaurav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaurav/32/6666_2.png) [@gaurav](https://forum.bubble.io/u/gaurav)\
**Post date:** [October 5, 2019, 7:11pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/8 "2019-10-05T19:11:45Z")

</div>

> [@canadianapps](#):
>
> 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?

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

> [@peter8](#):
>
> Will your plugin provide directions between markers with waypoints?

@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

> [@horlartom2013](#):
>
> Nice work @gaurav is it possible to add a geojson set of data

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

> [@Taiheta](#):
>
> Fantastic work!

Thank you @Taiheta! 😃

> [@gnelson](#):
>
> Awesome! Now can you build something similar for pdf’s? 😀

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

---

<div class="post-metadata">

**Author:** ![mike\_verbruggen](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mike_verbruggen/32/171992_2.png) [@mike\_verbruggen](https://forum.bubble.io/u/mike_verbruggen)\
**Post date:** [October 6, 2019, 12:58pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/9 "2019-10-06T12:58:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gaurav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaurav/32/6666_2.png) [@gaurav](https://forum.bubble.io/u/gaurav)\
**Post date:** [October 16, 2019, 7:40pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/10 "2019-10-16T19:40:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mirko.heimburger](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@mirko.heimburger](https://forum.bubble.io/u/mirko.heimburger)\
**Post date:** [October 27, 2019, 10:52pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/11 "2019-10-27T22:52:30Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![gaurav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaurav/32/6666_2.png) [@gaurav](https://forum.bubble.io/u/gaurav)\
**Post date:** [October 28, 2019, 7:59am UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/12 "2019-10-28T07:59:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mirko.heimburger](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@mirko.heimburger](https://forum.bubble.io/u/mirko.heimburger)\
**Post date:** [October 29, 2019, 5:22pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/13 "2019-10-29T17:22:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gaurav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaurav/32/6666_2.png) [@gaurav](https://forum.bubble.io/u/gaurav)\
**Post date:** [October 30, 2019, 5:36pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/14 "2019-10-30T17:36:50Z")

</div>

> [@mirko.heimburger](#):
>
> 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 😃 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

---

<div class="post-metadata">

**Author:** ![mirko.heimburger](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@mirko.heimburger](https://forum.bubble.io/u/mirko.heimburger)\
**Post date:** [October 30, 2019, 6:30pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/15 "2019-10-30T18:30:45Z")

</div>

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

Yeah. Thank you!!! 😃

---

<div class="post-metadata">

**Author:** ![mirko.heimburger](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@mirko.heimburger](https://forum.bubble.io/u/mirko.heimburger)\
**Post date:** [November 2, 2019, 11:21pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/16 "2019-11-02T23:21:18Z")

</div>

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:

 ![Maps_bdk_dynamic_hover_001](https://us1.discourse-cdn.com/bubble/original/3X/4/c/4c746e218abd627423d3f69989cae2efcda06af8.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![jonas.kwaschik](https://avatars.discourse-cdn.com/v4/letter/j/8797f3/32.png) [@jonas.kwaschik](https://forum.bubble.io/u/jonas.kwaschik)\
**Post date:** [November 21, 2019, 10:23pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/18 "2019-11-21T22:23:46Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gaurav](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gaurav/32/6666_2.png) [@gaurav](https://forum.bubble.io/u/gaurav)\
**Post date:** [November 22, 2019, 6:26pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/19 "2019-11-22T18:26:53Z")

</div>

> [@jonas.kwaschik](#):
>
> I tried via some added javascript in head tag but cannot figure out, how the map object is called to set options later.

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

---

<div class="post-metadata">

**Author:** ![lukejamison0](https://avatars.discourse-cdn.com/v4/letter/l/f4b2a3/32.png) [@lukejamison0](https://forum.bubble.io/u/lukejamison0)\
**Post date:** [January 8, 2020, 2:50am UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/22 "2020-01-08T02:50:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![it1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/it1/32/52693_2.png) [@it1](https://forum.bubble.io/u/it1)\
**Post date:** [January 20, 2020, 1:23pm UTC](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454/23 "2020-01-20T13:23:55Z")

</div>

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

 ![Screenshot 2020-01-20 at 13.35.14](https://us1.discourse-cdn.com/bubble/original/3X/d/6/d65af34eb7256d635d4b001d163c991bdf64ecee.png)

[Next page](https://forum.bubble.io/t/plugin-update-11-mar-2020-google-maps-bdk/68454.md?page=2)
