Hide/customize Google Maps controls on Bubble map element with CSS / JS

[joko]

Hey everyone!

I was wondering if it is somehow possible to hide / customize the Google Maps controls on the Bubble map element with the help of some custom code?

I found some idea on w3school.com but I don’t know how to implement it on Bubble.

Highly appreciate your help in this one!

[gerbertdelangen]

You should be able to disable the controls by unchecking “Allow zooming and dragging”.

[joko]

Thanks! That I already found out, but I’d love to keep the functionality of zooming & dragging while still being able to hide the controls.

[gerbertdelangen]

Ah ok. It seems not a lot is possible.

Not very beautiful but it should work (it hides most of the controls):

1. Install the Toolbox plugin
2. Add f.i. a page load workflow + the Run Javascript action with the code below:

stuffOnMap = document.getElementsByClassName(‘gmnoprint’);

for (let i = 0; i < stuffOnMap.length; i++) {
stuffOnMap[i].hidden = true;
}

Notes:

1. If the controls are still there try to add a pause action (Navigation - add a pause before next action) and experiment with the number of milliseconds.
2. Looking at the documentation in the intro it is actually not that hard to add the component to the page with some Javascript and then use your suggestion to hide the controls.