Google Maps Api prob

Need help APIs
1

Hey everyone,

My development team is running into an issue with our website. We use the Google maps API for a map to show different artists around the world. The issue is you need to use 2 fingers to actually use the map. Seems super weird and I want it to mirror google maps where you can move left right up down with one finger then zoom in and out with both. Is this a common issue, can we continue to use the same API? Happy father’s day BTW :fire:

The website is tattooatlas.app for map reference

Thanks !

Dylan

2

Are you using a plugin for map ? , or using google javascript for map api

3

I ran this through an AI tool I’ve been building for Bubble debugging — here’s what it came up with:

This is the Google Maps gestureHandling setting. By default it’s set to “cooperative”, which requires two fingers to pan the map on touch devices (so the map doesn’t hijack page scrolling). To get the Google-Maps-style behavior you want (one finger to pan, two to zoom), you need to set it to “greedy”.

Where you set it depends on how your map is built:

  • If you’re using the Google Maps JS API directly (in an HTML element): add gestureHandling: "greedy" to your map options object where you initialize the map (new google.maps.Map(...)).
  • If you’re using a plugin (Bubble’s native map or a 3rd-party one): check the plugin’s element settings for a “gesture handling” or “interaction” option. If it doesn’t expose one, you may be stuck with its default — in which case switching to a direct JS API implementation in an HTML element gives you full control.

So the fix itself is one line (gestureHandling: "greedy"), but you can only apply it if you have access to the map initialization code — which is why it matters whether you’re on a plugin or raw JS API.