Map objects persist in memory after component is detached

[Keith Henry]

This is a known issue in the API: https://issuetracker.google.com/issues/35821412 - it's been extant since 2011, so a fix is unlikely.

Every time new google.maps.Map(... is called on a new DOM element it adds a load of window and global event listeners. When the holding element is removed from the DOM the global events keep the map in memory.

This isn't a problem in traditional web apps, as the events are reset on the next page load, but in an SPA or PWA you get a stack of old maps in memory that are all listening for window resize and keydown events.

There appear to be two approaches to working around this:

• Maintain a singleton map/s DOM element that are reset and reused.
• Remove all the events on detach.

While the latter is preferred, it doesn't seem possible without digging through the internal implementation of the maps API.