Google Maps Customization in Bubble.io: Hiding Controls

Purpose

This CSS snippet allows developers to hide the map/satellite toggle and fullscreen button in Google Maps embedded in Bubble.io applications, while maintaining zooming and dragging functionalities.

CSS Snippet

cssCopy<style>
.gm-style-mtc { display: none !important; }
.gm-fullscreen-control { display: none !important; }
</style>

Usage

1. In your Bubble.io editor, navigate to the page where your Google Map is embedded.
2. Find the HTML element that contains your Google Map.
3. Add this CSS snippet to the HTML element, either in the header or inline with the map element.

What This Does

• .gm-style-mtc { display: none !important; }: Hides the map/satellite toggle button.
• .gm-fullscreen-control { display: none !important; }: Hides the fullscreen control button.

Important Notes

• This CSS will hide these controls on all Google Maps on the page where it's applied.
• Zooming and dragging functions of the map remain intact.
• The !important flag ensures these styles take precedence over Google's default styles.

When to Use

• Use when you want a cleaner, more streamlined map interface.
• Helpful for applications where these controls are not necessary or might confuse users.

Compatibility

• Works with Google Maps API integrated into Bubble.io applications.
• Tested on standard web browsers (Chrome, Firefox, Safari, Edge).