CODEWITHSUNDEEP
google-mapsionic-frameworkionic3mapsdistance-matrix
Antonio Posada Magdaleno
Antonio Posada Magdaleno

Reputation: 23

How to display route with native google maps on Ionic 3

I'm building a project in Ionic 3, I'm using the native maps plugin for Ionic, I can show the map and I can add a marker in a selected address, but I have not managed to show the recommended route on the map.

HTML:

 <div id="map"></div>

TS:

loadMap(){
var lat = this.placeInfo.latitudeFrom;
var lng = this.placeInfo.longitudeFrom;

let mapOptions: GoogleMapOptions = {
  camera: {
    target: {
      lat: lat,
      lng: lng,
      gestureHandling: 'none',
      zoomControl: true
    },
    zoom: 18,
    tilt: 30,
  }
};

this.map = GoogleMaps.create('map', mapOptions);

this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
  let marker: Marker = this.map.addMarkerSync({
    title: 'Ionic',
    icon: 'blue',
    animation: 'DROP',
    position: {
      lat: lat,
      lng:lng
    }
  });
})
.catch(error =>{
  console.log('error: ', error);
});

}

I'm trying this, but does not work

  displayRoutev2() {

this.directionsService.route({
  origin: this.placeInfo.startPoint,
  destination: this.placeInfo.endPoint,
  travelMode: 'DRIVING'
}, (response, status) => {
  if (status === 'OK') {
    this.directionsDisplay.setDirections(response);
    this.directionsDisplay.setMap(this.map);
  } else {
    window.alert('No se encontraron rutas disponibles.' + status);
  }
});
var service = new google.maps.DistanceMatrixService();

}

Can I use the var "service" to call any function? Or I need to try another way?

I can show route with another way that is not the better way, I need to use this native way, someone knows whats I can do?

Upvotes: 1

Views: 572

Answers (1)

Sreejith
Sreejith

Reputation: 21

    import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
    import {FormBuilder, FormGroup, Validators} from '@angular/forms';
    declare var google;
    @Component({
      selector: 'app-direction',
      templateUrl: './direction.page.html',
      styleUrls: ['./direction.page.scss'],
    })
    export class DirectionPage implements OnInit, AfterViewInit {
      @ViewChild('mapElement') mapNativeElement: ElementRef;
      @ViewChild('directionsPanel') directionsPanel: ElementRef;
      directionsService = new google.maps.DirectionsService;
      directionsDisplay = new google.maps.DirectionsRenderer;
      directionForm: FormGroup;
      constructor(private fb: FormBuilder) {
        this.createDirectionForm();
      }
      ngOnInit() {
      }
      createDirectionForm() {
        this.directionForm = this.fb.group({
          source: ['', Validators.required],
          destination: ['', Validators.required]
        });
      }
      ngAfterViewInit(): void {
        const map = new google.maps.Map(this.mapNativeElement.nativeElement, {
          zoom: 7,
          center: {lat: 41.85, lng: -87.65}
        });
        this.directionsDisplay.setMap(map);
     directionsDisplay.setPanel(this.directionsPanel.nativeElement);

      }
      DisplayRoute(formValues) {
        const that = this;
        this.directionsService.route({
          origin: formValues.source,
          destination: formValues.destination,
          travelMode: 'DRIVING'
        }, (response, status) => {
          if (status === 'OK') {
            that.directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    }

==In home.page.ts==
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Direction</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form [formGroup]="directionForm" (ngSubmit)="DisplayRoute(directionForm.value)">
    <ion-item>
      <ion-label position="floating">Source</ion-label>
      <ion-input formControlName="source"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Destination</ion-label>
      <ion-input formControlName="destination"></ion-input>
    </ion-item>
    <ion-button expand="full" type="submit" [disabled]="directionForm.invalid">Get Direction</ion-button>
  </form>

 <ion-card>
    <ion-card-content>
        <div #directionsPanel></div>
    </ion-card-content>
</ion-card>
  <div #mapElement class="map"></div>
</ion-content>

Upvotes: 1

Related Questions