llevo tiempo tratando de hacer funcionar esto en un proyecto que ya tiene varios componentes en el, se supone que el mapa deberia desplegarse en una modal luego de clickear en un icono, se despliega la modal vacia y me marca que la var google esta undefined, eso supongo que se debe a mis variables de opciones y demas. Alguien tiene alguna idea de como solucionarlo, llevo 1 dia con el problema, soy algo primerizo aun? Este fue mi primer intento:
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, Inject } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { DOCUMENT } from '@angular/common';
declare let google: any;
@Component({
selector: 'app-maps-api',
templateUrl: './maps-api.component.html',
styleUrls: ['./maps-api.component.css']
})
export class MapsApiComponent implements AfterViewInit {
@ViewChild('mapContainer') gmap: ElementRef;
map: google.maps.Map;
lat = 25.6510721;
lng = -100.3427724;
coordinates = new google.maps.LatLng(this.lat, this.lng);
mapOptions: google.maps.MapOptions = {
center: this.coordinates,
zoom: 16
};
marker = new google.maps.Marker({
position: this.coordinates,
map: this.map,
});
constructor(@Inject(DOCUMENT) private 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=XXXXXX";
this.elementRef.nativeElement.appendChild(s);
}
ngOnInit() {
// TODO use npm package for gmaps loading
var self = this;
setTimeout(function () {
self.mapInitializer();
}, 2000)
}
/* ngAfterViewInit() {
this.mapInitializer();
} */
mapInitializer() {
this.map = new google.maps.Map(this.gmap.nativeElement,
this.mapOptions);
google.maps.event.addListener(this.map, 'click', (event) => {
this.placeMarker(event);
});
this.marker.setMap(this.map);
}
placeMarker(event) {
var eventLatLng = { lat: event.latLng.lat(), lng: event.latLng.lng() };
this.lat = event.latLng.lat();
this.lng = event.latLng.lng();
this.marker.setPosition(eventLatLng);
this.map.setCenter(new google.maps.LatLng(this.lat, this.lng));
var infowindow = new google.maps.InfoWindow({
content: 'Marker Location:' + this.marker.getPosition()
});
infowindow.open(this.map, this.marker);
}
}
// Se supone que en el html deberia pasarle la ubicacion donde se pondra.
<h2 mat-dialog-title>Ubicación</h2>
<mat-dialog-content>
<div #mapContainer id="map"></div>
</mat-dialog-content>
<mat-dialog-actions class="float-right">
<button mat-button mat-dialog-close>CERRAR</button>
</mat-dialog-actions>
Y asignarle en el CSS un tamaño al mapa para que se expanda. Deduje que me indica que la variable google es nulla porque el script se ejecuta despues de las variables que estan mas arriba map, coordinates y mapOptions. Intente una variante como la siguiente:
const myApiKey = `12345`;
const lat = -34.397;
const lng = 150.644;
const zoom = 8;
const parentElement = document.getElementById(`map`); // a <div>
const script = document.createElement(`script`);
script.src = `https://maps.googleapis.com/maps/api/js?key=${myApiKey}`;
script.async = true;
script.defer = true;
script.onload = function () {
new google.maps.Map(parentElement, {
center: {lat, lng},
zoom
});
};
parentElement.insertBefore(script, null);
Al parecer si se ejecuta, pero no aparece nada.