Solución:
Puede usar Promise para cargar la API de Google de forma asincrónica cuando lo desee.
// map-loader.service.ts
import ...
declare var window: any;
@Injectable()
export class MapLoader {
private static promise;
map: google.maps.Map;
public static load() {
if (!MapLoader.promise) { // load once
MapLoader.promise = new Promise((resolve) => {
window['__onGapiLoaded'] = (ev) => {
console.log('gapi loaded')
resolve(window.gapi);
}
console.log('loading..')
const node = document.createElement('script');
node.src="https://maps.googleapis.com/maps/api/js?key=<YOUR _API_KEY>&callback=__onGapiLoaded";
node.type="text/javascript";
document.getElementsByTagName('head')[0].appendChild(node);
});
}
return MapLoader.promise;
}
initMap(gmapElement, lat, lng) {
return MapLoader.load().then((gapi) => {
this.map = new google.maps.Map(gmapElement.nativeElement, {
center: new google.maps.LatLng(lat, lng),
zoom: 12
});
});
}
}
Componente
//maps.component.ts
...
@Component({
selector: 'maps-page',
templateUrl: './maps.component.html'
})
export class MapsComponent implements OnInit {
@ViewChild('gmap') gmapElement: any;
constructor(public mapLoader: MapLoader) { }
ngOnInit() {
this.mapLoader.initMap(this.gmapElement, -37.81, 144.96) // await until gapi load
}
...
}
HTML de componente
// maps.component.html
<div #gmap ></div>
No olvide agregar CSS al elemento.
Una solución es crear la etiqueta de secuencia de comandos dinámicamente en ngAfterViewInit()
import { DOCUMENT } from '@angular/common';
...
constructor(private @Inject(DOCUMENT) document,
private elementRef:ElementRef) {};
ngAfterViewInit() {
var s = this.document.createElement("script");
s.type = "text/javascript";
s.src = "https://maps.googleapis.com/maps/api/js?key=API_KEY";
this.elementRef.nativeElement.appendChild(s);
}
Véase también https://github.com/angular/angular/issues/4903
Actualizar
<div id="map" #mapRef></div>
export class GoogleComponent implements OnInit {
@ViewChild("mapRef") mapRef: ElementRef;
constructor() { }
ngOnInit() {
this.showMap();
}
showMap() {
console.log(this.mapRef.nativeElement);
const location = { lat: 28.5355, lng: 77.3910 };
var options = {
center: location,
zoom: 8
}
const map = new google.maps.Map(this.mapRef.nativeElement, options);
this.addMarket(map, location);
}
addMarket(pos, map) {
return new google.maps.Marker({
position: pos,
map: map,
});
}
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)