How do i keep only 1 instance on google maps angular when changing routes?

I have an Angular 15+ app that uses the @angular/google-maps package. I have a component called app-map that includes the element. The issue I'm facing is that every time I navigate to a route that contains the component, the map is re-rendered, and I see multiple requests to the Google Maps API, the getViewPortInfo request.

This is problematic because it leads to unnecessary API calls, especially when users navigate between pages with the component multiple times. I need to find a way to prevent the map from being re-rendered and making repeated API requests each time the component is shown.

Continue reading...