Map: Expected mapDiv of type Element but was passed undefined - google maps

user_9948581 0
Viewed 6726

I have a map inside a div with a reference #mapa When i want to trace a route in the map the map refreshes. I want to not refresh the map i have the following code:

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

If i remove the div with the reference #mapa and i put it the reference into the <google-map> tag i got the title error and show the map without routes.

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);
    }
  });
}
angular typescript google-maps javascript
1 Answers

As far as I can see you can accomplish your goal just using the @angular/google-maps official module.

Your HTML will become something like this

<google-map [options]="options">
  <map-marker *ngFor="let some of somearray" [icon]="...", [label]="...", [position]="..."></map-marker>
  <map-directions-renderer [directions]="..." [options]="..."></map-directions-renderer>
</google-map>

and your trazarRoutaMapa() method will become something like this:

trazarRoutaMapa(): void {
    const directionsService = new google.maps.DirectionsService; // better if injected from constructor
    const request: google.maps.DirectionsRequest = {
      destination: {
        lat: this.markers[0].position.lat,
        lng: this.markers[0].position.lng
      },
      origin: {
        lat: this.markers[1].position.lat,
        lng: this.markers[1].position.lng
      },
      travelMode: google.maps.TravelMode.DRIVING
    };
    return directionsService.route(
    request, 
    (response, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        console.log('ESTATUS OKEY');
        directionsDisplay.setDirections(response);
      } else {
        window.alert("Fallo el estatus" + status);
      }
     });
  }

Disclaimer: I didn't test the code, just created on notepad copy/pasting :)

user_18606590
Related