Actualmente estoy construyendo un proyecto Angular que usa la API Javascript de Google Maps. Creé un componente que contiene un mapa y lo manipulé usando valores @Input.
Pero estoy colocando este componente en varias rutas y cada vez que navego a los componentes que usan este, el mapa se vuelve a cargar.
Tengo curiosidad por saber si hay una solución para cargar el mapa solo una vez, después del inicio de la aplicación y luego solo manipular usando entradas o servicios. Creo que esto evitará demasiadas conversiones que podrían ser costosas.
¡Gracias por cualquier idea!
El mapa de Google solo se carga una vez si lo inicializa en ngAfterViewInit: por ejemplo:
Tiene este método que crea el mapa con su configuración e invoca el método en 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(); }Déjame saber que funcionó para ti