I'm currently building an Angular project that uses Google Maps Javascript API. I've created component that contains map and maniulating it using @Input values.
But I'm placing this component in multiple routes and every time after navigating to components thats using this one, the map is loading again.
I'm curious if there is a solution to load map only once, after app start and then only manipulating using inputs or services. I think this will prevent from way tooo many conversions which could be expensive.
Thanks for any ideas!
Google map only load one time if you initialize it in ngAfterViewInit: For example:
You have this method that create the map with its settings and invoke the method in ngAfterViewInit:
@ViewChild('mapContainer', {static: false}) gmap: ElementRef;
lat: number = 41.850033;
lng: number = -87.6500523;
mapOptions: google.maps.MapOptions;
map: google.maps.Map;
mapInitializer() {
let coordinates = new google.maps.LatLng(this.lat, this.lng);
this.mapOptions = {
center: coordinates,
zoom: 4,
disableDefaultUI: true,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
};
this.map = new google.maps.Map(this.gmap.nativeElement,
this.mapOptions);
}
ngAfterViewInit(): void {
this.mapInitializer();
}
Let me know it worked for you