How to safe/store Google Map offline?

Im developing a web application where it need to have : 2 button on the map right top corner. Button - 1. ON 2. OFF .... when network goes off ... it need to be automatically showing saved offline google map. when goes online - ON ...it need to show online updated google map. THis is what i want.

I will give u guys an example. when u go to google map app from your android mobile. You can download saved maps ..which is like 130MB or higher ..i want to integrate that part to my web application...it will store ..saved offline map to localStorage or indexDB. then when network goes off ...it need to be show offline map.

Im trying to figure it out...still i couldnt find any proper solution for this. How can i fix it ??

Im using -

1. Angular
2. Ionic Framework
3. Typescript
4. Tailwindcss
5. Google map API

import {
ApplicationRef,
createComponent,
ElementRef,
EmbeddedViewRef,
EnvironmentInjector,
Injectable,
Injector,
} from '@angular/core';
import { Library, Loader } from '@googlemaps/js-api-loader';
import { environment } from 'src/environments/environment';
import { MarkerItemsComponent } from '../components/marker-items/marker-items.component';
@Injectable({
providedIn: 'root',
})
export class MapService {
map: google.maps.Map;
UpdatedMarker: HTMLDivElement;
markers: google.maps.marker.AdvancedMarkerElement[] = [];
private mapOptions: google.maps.MapOptions;
public polygonColor: string;
public counterimg = 0 as number;
// ** Map Loader API
private loader = new Loader({
region: 'US',
language: 'en',
version: 'beta',
libraries: ['maps'],
apiKey: environment.browserMapKey,
});




constructor() {
this.mapOptions = {
zoom: 16,
maxZoom: 22,
minZoom: 5,
mapTypeControl: false,
mapTypeId: 'roadmap',
disableDefaultUI: true,
streetViewControl: false,
keyboardShortcuts: false,
mapId: 'c2f71cbe71abd6cc',
disableDoubleClickZoom: true,
center: { lat: 40.712776, lng: -74.005974 },
};
}




public async initializeMap(mapRef: ElementRef) {
const { Map } = await this.importMapsLibrary('maps');
this.map = new Map(mapRef.nativeElement, this.mapOptions);
}



// !! Map Helper Methods
private async importMapsLibrary(type: Library) {
return (await this.loader.importLibrary(type)) as google.maps.MapsLibrary;
}

private async importMarkersLibrary(type: Library) {
return (await this.loader.importLibrary(type)) as google.maps.MarkerLibrary;
}

private async importWebGLLibrary(type: Library) {
return (await this.loader.importLibrary(
type
)) as google.maps.WebGLOverlayView;
}
// !! Map Helper Methods
}




\

Continue reading...