Theres no route drawn between the two markers

Question

I am getting all the result in the console but the route is not getting drawn between the two markers.Should i import any module for the directions? Should i place the directions outside autocomplete?

app.component.ts

i have omitted the autocomplete for source

//load Places Autocomplete2
         this.mapsAPILoader.load().then(() => {
          let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef1.nativeElement, {
            types: ["address"]
          });
          autocomplete.addListener("place_changed", () => {
            this.ngZone.run(() => {
              //ge

t the place result
                  let place: google.maps.places.PlaceResult = autocomplete.getPlace();
                  //verify result
                  if (place.geometry === undefined || place.geometry === null) {
                    return;
                  }

                  //set latitude, longitude and zoom
                  this.latitude1 = place.geometry.location.lat();
                  this.longitude1 = place.geometry.location.lng();
                  this.zoom = 9;
                });
                var map = new google.maps.Map(this.searchElementRef.nativeElement, {
                  center: {lat:this.latitude,lng:this.longitude},
                  zoom: 7
                });
                var directionsService = new google.maps.DirectionsService();
                var directionsDisplay = new google.maps.DirectionsRenderer({
                  'map': map
                });
                console.log("display : " + directionsDisplay.getMap().getCenter())
                var start = new google.maps.LatLng(this.latitude, this.longitude);
                var end = new google.maps.LatLng(this.latitude1, this.longitude1);
                // Set destination, origin and travel mode.
                var request : google.maps.DirectionsRequest = {
                  origin: start,
                  destination: end,
                  travelMode: google.maps.TravelMode.DRIVING
                };
                console.log("request : " + request.origin +"request : " + request.destination  )

                // Pass the directions request to the directions service.
               // var directionsService = new google.maps.DirectionsService();
                directionsService.route(request, function(response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                    // Display the route on the map.
                    directionsDisplay.setMap(map);
                    directionsDisplay.setDirections(response); 
                    console.log("response : " + response.geocoded_waypoints.map(f => f.place_id))   
                  } else { console.log("not OK !" + status)}
                });
              });
            });
          }

          private setCurrentPosition() {
            if ("geolocation" in navigator) {
              navigator.geolocation.getCurrentPosition((position) => {
                this.latitude = position.coords.latitude;
                this.longitude = position.coords.longitude;
                this.zoom = 10;
              });
            }
          }
        }

What does your console say about directions? Log `status` in the directions request and debug from there. Or provide a [MCVE](http://stackoverflow.com/help/mcve). — MrUpsidown, Mar 12 '18 at 23:08
what do you mean by Log status in the directions request?This is what i get in the console:display : (15.2669741, 73.96839079999995) request : (15.2669741, 73.96839079999995)request : (15.5418697, 74.49181929999997) response : ChIJC_aUoMezvzsRccdgEwsEikU,ChIJN613Z48TvzsRwvHv3g8BSQU — Antonio Antao, Mar 15 '18 at 06:35
I did the Log status in the directions request and it shows OK — Antonio Antao, Mar 15 '18 at 06:45

score 1 · Answer 1 · answered Mar 13 '18 at 07:07

You can use agm-direction from these links:

npmjs or github

Install agm & agm-direction:

npm install --save @agm/core
npm install --save agm-direction

Import modules:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { AgmCoreModule } from '@agm/core';            // @agm/core
import { AgmDirectionModule } from 'agm-direction';   // agm-direction

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({ // @agm/core
      apiKey: 'your key',
    }),
    AgmDirectionModule      // agm-direction
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How to use:

In your html add the agm-direction component inside the agm-map component

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination"></agm-direction>
</agm-map>

in your ts file you can configure your directions

  lat: Number = 24.799448;
  lng: Number = 120.979021;
  zoom: Number = 14;

  dir = undefined;

  public getDirection() {
    this.dir = {
      origin: { lat: 24.799448, lng: 120.979021 },
      destination: { lat: 24.799524, lng: 120.975017 }
    }
  }

here is a sample in stackblitz: https://stackblitz.com/edit/angular-google-maps-direction

i tried that but i receive this error:ERROR Error: No provider for GoogleMapsAPIWrapper! — Antonio Antao, Mar 15 '18 at 06:57
Can you try adding this to your main module: @NgModule({ providers: [ ... GoogleMapsAPIWrapper, ] }) — Mervin Samy, Mar 15 '18 at 07:33
this is the error i receive:Type 'typeof GoogleMapsAPIWrapper' is not an array type. — Antonio Antao, Mar 15 '18 at 10:33

Theres no route drawn between the two markers

1 Answers1