2

I am using angular google maps in my angular Web App. I want to show directions from user's current location to a marker containing sub locations. In my web app the marker has multiple sub locations identified using lat and lng. So when user clicks on these sub locations, directions has to be shown from the user's current location.

I have installed agm-direction component and included in app-module.ts.

Currently, My HTML file has,

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker *ngFor="let marker of coordinates; let i = index" 
        [iconUrl]="icon" 
        [latitude]="marker.latitude" 
        [longitude]="marker.longitude"
        [markerClickable]="true"
        (markerClick)="markerClicked(marker.latitude,marker.longitude)">
        <agm-snazzy-info-window [closeWhenOthersOpen]="true" [maxHeight]="300" [maxWidth]="1400">
          <ng-template>
            <mat-card>{{ pLocationId }}  {{ pLocationName }}</mat-card><br/>
              <mat-grid-list cols="12" rowHeight="100px" (ngModel)="pCycle">
                <mat-grid-tile [colspan]="4" [rowspan]=2 *ngFor="let cycle of pCycle; let i = index" [style.background]="orange"
                [style.padding-right]="20">
                    <mat-grid-tile-header [style.height]="30">{{i+1}}</mat-grid-tile-header>
                  <div [style.background]="orange">
                    <i class="material-icons">motorcycle</i>
                    <span [style.color]="white" >{{cycle.qrCode}}</span><br/>
                    <br/>
                    <i class="material-icons">battery_alert</i>
                    <span>{{ cycle.batteryLevel }}</span>

                  </div>
                  <mat-grid-tile-footer [style.background]="yellow">
                    <button mat-mini-fab (click)="showDirection(cycle.latitude, cycle.longitude)">
                      <mat-icon>navigation</mat-icon>
                    </button>
                  </mat-grid-tile-footer>
                </mat-grid-tile>
                </mat-grid-list>
          </ng-template>
        </agm-snazzy-info-window>
    </agm-marker>
    <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination" [visible]="show"></agm-direction>
</agm-map>

And in TS file,

showDirection(dirLat: any, dirLng: any) {
    let srcLat, srcLng;
    if ('geolocation' in navigator) {
        navigator.geolocation.getCurrentPosition((position) = > {
            srcLat = position.coords.latitude;
            srcLng = position.coords.longitude;
        });
    }
    this.dir = {
        origin: {
            latitude: srcLat,
            longitude: srcLng
        },
        destination: {
            latitude: dirLat,
            longitude: dirLng
        }
    };
    this.show = true;
    console.log('Nav button clicked');
}

But the expected behavior is not coming. The app is not showing directions and even the console output,

Nav button clicked

is also not coming. Please correct me where I am wrong.

NEW EDIT

Added <agm-direction> tag inside the <agm-marker>, now the console output is coming but direction is not showing.

Here is the new edited HTML,

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker *ngFor="let marker of coordinates; let i = index" 
        [iconUrl]="icon" 
        [latitude]="marker.latitude" 
        [longitude]="marker.longitude"
        [markerClickable]="true"
        (markerClick)="markerClicked(marker.latitude,marker.longitude)">
        <agm-snazzy-info-window [closeWhenOthersOpen]="true" [maxHeight]="300" [maxWidth]="1400">
          <ng-template>
            <mat-card>{{ pLocationId }}  {{ pLocationName }}</mat-card><br/>
              <mat-grid-list cols="12" rowHeight="100px" (ngModel)="pCycle">
                <mat-grid-tile [colspan]="4" [rowspan]=2 *ngFor="let cycle of pCycle; let i = index" [style.background]="orange"
                [style.padding-right]="20">
                    <mat-grid-tile-header [style.height]="30">{{i+1}}</mat-grid-tile-header>
                  <div [style.background]="orange">
                    <i class="material-icons">motorcycle</i>
                    <span [style.color]="white" >{{cycle.qrCode}}</span><br/>
                    <br/>
                    <i class="material-icons">battery_alert</i>
                    <span>{{ cycle.batteryLevel }}</span>

                  </div>
                  <mat-grid-tile-footer [style.background]="yellow">
                    <button mat-mini-fab (click)="showDirection(cycle.latitude, cycle.longitude)">
                      <mat-icon>navigation</mat-icon>
                    </button>
                  </mat-grid-tile-footer>
                </mat-grid-tile>
                </mat-grid-list>
          </ng-template>

        </agm-snazzy-info-window>
        <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination" [visible]="show"></agm-direction>
    </agm-marker>
</agm-map>
Milo
  • 3,365
  • 9
  • 30
  • 44
Anil
  • 1,748
  • 8
  • 32
  • 67

2 Answers2

1

Take a look at @bespunky/angular-google-maps.

It's a new open source library which provides many cool features out-of-the-box. Specifically with directions, probably the coolest feature is allowing developers to use their overlays (e.g. markers, polygons, etc.) directly as places and waypoints, alongside many other flexible types. No more manual labor...

Here's an example from the docs:

<bs-google-map *bsSafe ...>
    <bs-google-maps-marker  [position]="someCoord" #marker="marker"></bs-google-maps-marker>
    <bs-google-maps-polygon [path]="somePath"      #polygon="polygon"></bs-google-maps-polygon>

    <bs-google-maps-directions [through]="[marker, polygon, 'Jerusalem', [31.9, 34.7], { lat: 31.99, lng: 35 }, 'Tel Aviv']"></bs-google-maps-directions>
</bs-google-map>

Full directions docs | npm package | Official site & demos

Shy Agam
  • 1,285
  • 1
  • 13
  • 37
0

this.dir = { origin: { latitude: srcLat, longitude: srcLng }, destination: { latitude: dirLat, longitude: dirLng } };

you should use:

this.dir = {
  origin: { lat: srcLat, lng: srcLng },
  destination: { lat: dirLat, lng: dirLng }
};
Binh NT
  • 1
  • 1