bug(@angular/google-maps): Unable to preventDefault inside passive event listener invocation on <google-map>

[chestongo]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using the component and scrolling over it, the inspector console shows the following error:

main.js:138 Unable to preventDefault inside passive event listener invocation.

This error occurs when zooming in or out on the map, making it impossible to hide the error. Additionally, it triggers the outer scroll, causing the entire window to scroll when interacting with the map, which is not user-friendly.

Attempts to Fix:
I have tried several methods to resolve this issue, but none have been successful:

•	Adding (wheel) or (scroll) events and using $event.preventDefault() results in the error being triggered twice.

Reproduction

1.	Integrate the <google-map> component into an Angular project.
2.	Open the application in a browser.
3.	Scroll over the map to zoom in or out.
4.	Observe the error in the inspector console.

Expected Behavior

•	No error should appear in the console when zooming in or out on the map.
•	Scrolling within the map should not trigger the outer window scroll.

Actual Behavior

•	The error Unable to preventDefault inside passive event listener invocation. appears in the console.
•	Scrolling within the map also triggers the outer window scroll.

Environment

•	Angular Version: 18.0.6
•	<google-map> Component Version: 18.1.2
•	Browser: Chrome
•	Operating System: Node v22.1.0, Mac

[chestongo]

Very ugly loophole, but it works.
I am using tailwind, but you can use css as well.
Wrap the google map component around these 2 divs:

<div class="w-full h-full overflow-y-hidden overscroll-none">
  <div class="w-full h-full mr-[1px]">
    <google-map></google-map>
  </div>
</div>

You can configure your own width and height for both divs.

Make sure the margin right or left is 1 px. If you change this to margin top or bottom with overflow-x-hidden (which seems nicer) you will still slight movements on the map while scrolling.

Don't forget to add this css:

::-webkit-scrollbar {
  height: 0px;
}

The errors will still be shown, but at least you prevent the window from scrolling, while zooming in or out from the map.

[crisbeto]

We don't bind any events ourselves so this is likely coming from Google Maps itself. Closing since we can't do much about it on our end.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}