1

estoy utilizando el paquete de google-maps en angular, tengo un mapa el tiene un puntero y actualmente con un input de dirección busco el otro puntero, pero sucede que quiero mostrar la ruta.

<google-map height="500px" width="100%" [zoom]="zoom" [center]="center" [options]="options" (mapClick)="click($event)" #mapa>
  <map-marker #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label"
    [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, marker.info)" (mapDragend)="moveMap($event)">
  </map-marker>
  <map-info-window>{{ infoContent }}</map-info-window>
</google-map>

Este código debería funcionar ya que en la documentación dice que así debo declarar el mapa, pero si lo dejo así y utilizo la propiedad directionsDisplay.setMap(map) para trasar mi ruta obtengo el error del titulo, al contrario si lo declaro de esta forma funciona

  <div style="height: 500px; width: auto;" #mapa>
    <google-map height="500px" width="100%" [zoom]="zoom" [center]="center" [options]="options" (mapClick)="click($event)" >
      <map-marker #markerElem *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label"
        [title]="marker.title" [options]="marker.options" (mapClick)="openInfo(markerElem, marker.info)" (mapDragend)="moveMap($event)">
      </map-marker>
      <map-info-window>{{ infoContent }}</map-info-window>
    </google-map>
  </div>

Pero darle click en el buscador me actualiza todo el mapa, hace como un refrescamiento y al final muestra la ruta tal cual, pero no seria lo optimo dejo mi función de trazar la ruta

trazarRutaMapa() {
    const directionsService = new google.maps.DirectionsService;

    const directionsDisplay = new google.maps.DirectionsRenderer;
    const map = new google.maps.Map(this.mapa.nativeElement, {
        zoom: 7,
        center: { lat: this.markers[0].position.lat, lng: this.markers[0].position.lng }
    });

    directionsDisplay.setMap(map);
    directionsDisplay.setOptions({
      suppressMarkers: false, draggable: true, markerOptions:
        { icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' }
    });

    directionsService.route({
      origin: { lat: this.markers[0].position.lat, lng: this.markers[0].position.lng },
      destination: { lat: this.markers[1].position.lat, lng: this.markers[1].position.lng },
      travelMode: google.maps.TravelMode.DRIVING,

    }, (response, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        console.log('ESTATUS OKEY');

        directionsDisplay.setDirections(response);
      } else {
        window.alert("Fallo el estatus" + status);
      }
    });
  } 

Según vi algunos ejemplos la propiedad setMap(map) solo se ejecuta en un div

1 respuesta 1

1

Es probable que sea lo que dices, ¿Ya probaste colocando la referencia en un div?. Si nos vamos a las definiciones de tipos tenemos que el constructor de google maps es un elemento constructor(mapDiv: E, opts?: MapOptions); y tu le estás pasando una referencia a un component.

Otra cosa que es importante tener en cuenta es que la ejecución del método trazarRutaMapa solo puede hacerse dentro del hook ngAfterViewInit porque la referencia que apunta a un elemento HTML solo es inicializada en este punto.

1
  • Como explico en la pregunta funciona haciendo referencia a un div, lo cual no debería ser ya que google-maps, define la etiqueta <google-maps></google-maps> y ahi debe ir toda la configuacion del mapa, como ancho y largo, no he encontrado una solución, ya que al hacer referencia al div el mapa se refresca y se ve feo. el 7 may. 2020 a las 3:18

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.