0

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.

1 respuesta 1

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

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.