Google Maps widget — single-finger pan not working in dashboard iframe

Developers
1

Hi all,

I’ve built a Homey Pro app that displays a Google Maps widget on the dashboard showing real-time family member locations via OwnTracks and MQTT. The widget works well overall, but I’m having trouble getting smooth touch panning to work on a tablet.

The problem:
When I touch and drag on the map, it only pans a small amount per touch. I have to lift my finger and touch again repeatedly to pan any meaningful distance. It behaves as if each touch gesture is being intercepted and only the initial movement is passed through to Google Maps.

What I’ve tried:

  • gestureHandling: 'greedy' in the Google Maps initialisation options
  • touch-action: none on both html, body and #map in CSS
  • user-scalable=no in the viewport meta tag

None of these have made any difference. My suspicion is that the Homey dashboard iframe is consuming the touch events before they reach the Google Maps JS layer.

Environment:

  • Homey Pro (2023), Homey OS 12
  • Widget built with Homey SDK3
  • Displayed on an Android tablet via the Homey dashboard
  • Google Maps JavaScript API loaded dynamically inside the widget iframe

Question:
Has anyone successfully got smooth single-finger touch panning working inside a Homey dashboard widget iframe? Is there a Homey-specific workaround, or a way to configure the iframe to pass touch events through?

Any pointers would be much appreciated!

2

Update — investigation results

I’ve now exhausted all the standard approaches for fixing touch event handling inside the widget iframe. Here’s a summary of everything I tried:

Google Maps initialisation options:

  • gestureHandling: 'greedy' — no change

CSS:

  • touch-action: none on html, body and #map — no change
  • touch-action: auto !important on #map — no change
  • user-scalable=no in the viewport meta tag — no change

JavaScript touch event listeners on the map container:

const blockParentInterception = (event) => {
  event.stopPropagation();
  event.preventDefault();
};
mapContainer.addEventListener('touchstart', blockParentInterception, { passive: false });
mapContainer.addEventListener('touchmove',  blockParentInterception, { passive: false });
mapContainer.addEventListener('touchend',   blockParentInterception, { passive: false });

No change.

Conclusion:

Based on the behaviour and the fact that none of the JavaScript or CSS approaches made any difference, I believe the touch events are being intercepted at the native Homey app level before they reach the iframe’s JavaScript layer. This means the fix needs to come from Athom rather than from within the widget code itself.

Request:

Is there any way for a widget to opt out of the dashboard’s swipe/pan gesture handling? For example, an attribute or API that tells the Homey dashboard container to pass all touch events through to the iframe unmodified?

This would be really useful for any widget that embeds an interactive map or other touch-based content. Happy to test any suggestions!