mapInitializer() {
let coordinates = new google.maps.LatLng(this.lat, this.lng);
let mapOptions: google.maps.MapOptions = {
center: coordinates,
zoom: 16
};
let marker = new google.maps.Marker({
position: coordinates,
map: this.map,
});
this.map = new google.maps.Map(this.gmap.nativeElement,
mapOptions);
google.maps.event.addListener(this.map, 'click', (event) => {
var eventLatLng = { lat: event.latLng.lat(), lng: event.latLng.lng() };
this.lat = event.latLng.lat();
this.lng = event.latLng.lng();
marker.setPosition(eventLatLng);
this.map.setCenter(new google.maps.LatLng(this.lat, this.lng));
var infowindow = new google.maps.InfoWindow({
content: 'Marker Location:' + marker.getPosition()
});
infowindow.open(this.map, marker);
});
marker.setMap(this.map);
}
Ya comprobe que era la sintaxis, si lo cargo como un componente independiente y no una modal, si carga el mapa. Ahora mi problema es que necesito que forzosamente sea una modal.
***Y porfin pude hacer que funcionara, el tema era que la modal por alguna razon no podia pasarle sus propiedades al mapa, entonces simplemente hay que forzar al mapa a desplegarse con un tamaño definido y listo:
#map {
height: 500px !important;
width: 500px !important;
}