Trying to solve a challenge with an Angular 12 Ionic app that utilizes the Google Maps API through the @angular/google-maps package. Our goal is to maintain map functionality even in areas with unreliable internet connectivity. We are exploring the idea of caching or storing the loaded map locally for offline access.
The initial expectation is for the user to be online when the map is initialized and markers/polyline are loaded
If the user goes offline and navigates within the app, we want to display the previously loaded map, polylines, and markers upon returning to the map view
The current issue we're facing is that the component gets destroyed and reloaded when navigating back, causing the map to reload as well, which is not feasible in offline mode. Our attempt to serialize the google.maps object to json using the described package has encountered issues.
let mapTest: google.maps.Map;
const center: google.maps.LatLngLiteral = { lat: centerPoint.lat, lng: centerPoint.lng };
mapTest = new google.maps.Map(document.getElementById('map') as HTMLElement, {
center,
zoom: 11
});
This TypeScript implementation aligns with the Google API Documentation. However, attempting to stringify the map results in an error.
The same error occurs when attempting to stringify mapTest.data.
We are wondering if there's a way to locally store the google.map object or google.map.data object? This feature will eventually be implemented on an Android device using Ionic. Is achieving this possible with Native Android maps, or is it simply not a feasible task?