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

**URL:** <https://forum.bubble.io/t/hide-customize-google-maps-controls-on-bubble-map-element-with-css-js/181101>\
**Category:** Need help\
**Created:** [December 5, 2021, 4:23pm UTC](https://forum.bubble.io/t/hide-customize-google-maps-controls-on-bubble-map-element-with-css-js/181101 "2021-12-05T16:23:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![joko](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/joko/32/18900_2.png) [@joko](https://forum.bubble.io/u/joko)\
**Post date:** [December 5, 2021, 4:23pm UTC](https://forum.bubble.io/t/hide-customize-google-maps-controls-on-bubble-map-element-with-css-js/181101/1 "2021-12-05T16:23:17Z")

</div>

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](https://www.w3schools.com/graphics/google_maps_controls.asp#:~:text=Adding%20or%20removing%20controls%20from,to%20false%20to%20hide%20it.) but I don’t know how to implement it on Bubble.

Highly appreciate your help in this one! 🙂

---

<div class="post-metadata">

**Author:** ![gerbertdelangen](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gerbertdelangen/32/144602_2.png) [@gerbertdelangen](https://forum.bubble.io/u/gerbertdelangen)\
**Post date:** [December 5, 2021, 4:31pm UTC](https://forum.bubble.io/t/hide-customize-google-maps-controls-on-bubble-map-element-with-css-js/181101/2 "2021-12-05T16:31:59Z")

</div>

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

![image](https://us1.discourse-cdn.com/bubble/original/3X/5/e/5e02b80f9001461d3487e5652820122d91728ede.png)

---

<div class="post-metadata">

**Author:** ![joko](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/joko/32/18900_2.png) [@joko](https://forum.bubble.io/u/joko)\
**Post date:** [December 5, 2021, 4:33pm UTC](https://forum.bubble.io/t/hide-customize-google-maps-controls-on-bubble-map-element-with-css-js/181101/3 "2021-12-05T16:33:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gerbertdelangen](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gerbertdelangen/32/144602_2.png) [@gerbertdelangen](https://forum.bubble.io/u/gerbertdelangen)\
**Post date:** [December 5, 2021, 5:15pm UTC](https://forum.bubble.io/t/hide-customize-google-maps-controls-on-bubble-map-element-with-css-js/181101/4 "2021-12-05T17:15:15Z")

</div>

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](https://www.w3schools.com/graphics/google_maps_intro.asp) 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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [February 13, 2022, 4:23pm UTC](https://forum.bubble.io/t/hide-customize-google-maps-controls-on-bubble-map-element-with-css-js/181101/5 "2022-02-13T16:23:29Z")

</div>

This topic was automatically closed after 70 days. New replies are no longer allowed.