Google Maps Addon

Ionic Framework ionic-v3
1

Is there any possible way to input Google maps Navigation into Ionic (distance between two points, what places are near or around destination, etc.)?

2

Hi, @jtmizzy34

Try this code it’s working fine

index.html

<script src="http://maps.google.com/maps/api/js?key=your_google_map_api&libraries=places"></script>

home.ts

import { Component, NgZone, ElementRef, ViewChild } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation';
import { googlemaps } from 'googlemaps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})


export class HomePage {

  @ViewChild('map')
  mapElement: ElementRef;

  map:any;
  latLng:any;
  markers:any;
  mapOptions:any;

  startService:any;
  autocompleteStart:any;

  endService:any;
  autocompleteEnd:any;


  directionsService = new google.maps.DirectionsService;
  directionsDisplay = new google.maps.DirectionsRenderer;
  start:any;
  end:any;
  travelType:any = 'DRIVING';
 
  constructor(private ngZone: NgZone, private geolocation : Geolocation) { }

  ionViewDidLoad() {
    this.loadMap();
    this.startService = new google.maps.places.AutocompleteService();        
    this.autocompleteStart = [];
    this.endService = new google.maps.places.AutocompleteService();        
    this.autocompleteEnd = [];
    this.start = '';
    this.end = '';
  }

  loadMap(){

    this.geolocation.getCurrentPosition().then((position) => {

      this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     
      this.mapOptions = {
        center: this.latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }   

      this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);

      this.directionsDisplay.setMap(this.map);

    }, (err) => {
      alert('err '+err);
    });

  }

/*-----------------------Search Direction--------------------*/

  startSearch() {
    console.log('modal > updateSearch');
    if (this.start == '') {
      this.autocompleteStart = [];
      return;
    }
    let self = this; 
    let config = { 
    input: this.start, 
    componentRestrictions: {  } 
    }
    this.startService.getPlacePredictions(config, function (predictions, status) {
    console.log('modal > getPlacePredictions > status > ', status);
    self.autocompleteStart = [];            
    predictions.forEach(function (prediction) {              
    self.autocompleteStart.push(prediction);
    });
    });
}

  endSearch() {
    console.log('modal > updateSearch');
    if (this.end == '') {
    this.autocompleteEnd = [];
    return;
    }
    let self = this; 
    let config = { 
      input: this.end, 
      componentRestrictions: {  } 
    }
    this.endService.getPlacePredictions(config, function (predictions, status) {
      console.log('modal > getPlacePredictions > status > ', status);
      self.autocompleteEnd = [];            
      predictions.forEach(function (prediction) {              
        self.autocompleteEnd.push(prediction);
      });
    });
  }

  chooseStart(item){
    console.log('item',item);
    this.start = item.description; 
    this.autocompleteStart = [];
  }
  
  chooseEnd(item){
    console.log('item',item);
    this.end = item.description;
    this.autocompleteEnd = [];
  }

  getDirections(){
    console.log('start',this.start,' ','end',this.end);

    this.directionsService.route({
      origin : this.start,
      destination : this.end,
      travelMode : this.travelType
    }, (response, status) => {
        if (response) {
        this.directionsDisplay.setDirections(response);
        console.log('response:-',response);
      } else {
        alert('Directions request failed due to ' + status);
      }
    });
  }

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Map
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>

<form (submit)="getDirections()" align="center">

	<ion-searchbar 
	[(ngModel)]="start" 
	name="start"
	[showCancelButton]="shouldShowCancel" 
	(ionInput)="startSearch()" 
	(ionCancel)="dismiss()"
	placeholder="Starting Places">
	</ion-searchbar>
	<ion-list>
	<ion-item *ngFor="let item of autocompleteStart" (click)="chooseStart(item)">
	{{ item.description }}
	</ion-item>
	</ion-list>

	<ion-searchbar 
	[(ngModel)]="end" 
	name="end"
	[showCancelButton]="shouldShowCancel" 
	(ionInput)="endSearch()" 
	(ionCancel)="dismiss()"
	placeholder="Ending Places">
	</ion-searchbar>
	<ion-list>
	<ion-item *ngFor="let item of autocompleteEnd" (click)="chooseEnd(item)">
	{{ item.description }}
	</ion-item>
	</ion-list>

	<button ion-button round>GO</button>
</form>
<br>
  <div #map id="map"></div>
</ion-content>

Thanks,