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; }