Ionic 3 Native Google Maps Application

Ionic 3 Native Google Maps Application Development

Used Plugins : Install the below Plugins In your Ionic Application

ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE"

npm install --save @ionic-native/google-maps

Creating a page : 

ionic g page livedata 
(or)
ionic generate page livedata

Import the following code in your application src/app/app.module.ts

import { LivedataPage } from './../pages/livedata/livedata';
import { GoogleMaps } from '@ionic-native/google-maps';

Add the following data in @ngModule of app.module.ts as follows :

@NgModule({
  declarations: [
    ......
    LivedataPage
    ....
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LivedataPage
  ],
  providers: [
    GoogleMaps
  ]
})

Now add the following Code in your livedata.html file :

<ion-header color="primary">
   <ion-navbar>
    <ion-title>Live Data</ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
  <div #map style="height:100%"></div>
</ion-content>

Add the following data in your livedata.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';


import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  MarkerOptions,
  Marker
} from '@ionic-native/google-maps';

import { Observable } from 'rxjs/Observable';
import "rxjs/add/observable/interval";

@Component({
  selector: 'page-livedata',
  templateUrl: 'livedata.html',
})
export class LivedataPage {

  @ViewChild('map') element;

  lattitude: any;
  longitude: any;
  myMap: GoogleMap;
  masterArray = [
    {
      "lat": 17.439930,
      "lng": 78.498274,
      "name": "Secunderabad"
    },
    {
      "lat": 17.433617,
      "lng": 78.523391,
      "name": "Mettuguda"
    },
    {
      "lat": 17.428310,
      "lng": 78.538610,
      "name": "Tharnaka"
    },
    {
      "lat": 17.409627,
      "lng": 78.544114,
      "name": "Habsiguda"
    },
    {
      "lat": 17.398377,
      "lng": 78.558265,
      "name": "Uppal"
    },
    {
      "lat": 17.345718,
      "lng": 78.552230,
      "name": "Lb Nagar"
    },
    {
      "lat": 17.368783,
      "lng": 78.524671,
      "name": "Dilsuknagar"
    },

    {
      "lat": 17.373093,
      "lng": 78.490038,
      "name": "Malakpet"
    },
    {
      "lat": 17.357361,
      "lng": 78.511196,
      "name": "Saidabad"
    },
    {
      "lat": 17.348000,
      "lng": 78.508584,
      "name": "Santhosh nagar"
    },
    {
      "lat": 17.337161,
      "lng": 78.496837,
      "name": "DRDL"
    },
    {
      "lat": 17.391636,
      "lng": 78.440065,
      "name": "Mehidipatanam"
    },
    {
      "lat": 17.393000,
      "lng": 78.473000,
      "name": "Abids"
    },
    {
      "lat": 17.386041,
      "lng": 78.466594,
      "name": "Nampally"
    },
    {
      "lat": 17.437461,
      "lng": 78.448288,
      "name": "Ameerpet"
    },
    {
      "lat": 17.448293,
      "lng": 78.391485,
      "name": "Madhapur"
    },
    {
      "lat": 17.447412,
      "lng": 78.376230,
      "name": "Hitech-city"
    },

    {
      "lat": 17.440080,
      "lng": 78.348917,
      "name": "Gachibowli"
    },
    {
      "lat": 17.251160,
      "lng": 78.437735,
      "name": "Shamshabad"
    },
    {
      "lat": 17.189853,
      "lng": 78.648384,
      "name": "Ibrahimpatanam"
    },
    {
      "lat": 17.327113,
      "lng": 78.591241,
      "name": "Hayathnagar"
    }
  ]
  lintCurrentCounter: number = 0;

  markerIcon: any;

  constructor(public navCtrl: NavController, public platform: Platform, public googleMaps: GoogleMaps) {
    this.platform.ready().then(() => {
      this.lattitude = 17.385044;
      this.longitude = 78.486671;
      this.showMap();
    })
  }

  showMap() {
    this.myMap = GoogleMaps.create(this.element.nativeElement);
    this.myMap.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
      this.showItemOnMap();
     Observable.interval(5000).subscribe((x) => {
        this.showItemOnMap();
        console.log("Iam in Observable");
      })
    })
  }

  showItemOnMap() {
    let i = this.lintCurrentCounter;
    let carMarker;
    if (i < this.masterArray.length) {
      this.lintCurrentCounter = this.lintCurrentCounter + 1;
      let position = this.getPositionValues(this.masterArray[i]);

      if (i < this.masterArray.length) {
        this.addPolyOptions(this.masterArray[i - 1], this.masterArray[i]);
          if(i!=0 || i!= this.masterArray.length-1){
            this.addMarker1(this.masterArray[i],'car');
          }
        if (i == 0 || i == this.masterArray.length - 1) {
          this.addMarker(this.masterArray[i], this.masterArray[i].name);
        }
        this.myMap.animateCamera(position);
      }
    }
  }

  getPositionValues(targetValue) {
    return {
      target: targetValue,
      zoom: 10
    }
  }

  addPolyOptions(source, destination) {
    return this.myMap.addPolyline({
      points: [
        source,
        destination
      ],
      'color': '#006400',
      'width': 5,
      'geodesic': true
    })
  }

  addMarker1(positionValue, name) {
    let markerOptions: MarkerOptions = {
      position: positionValue,
      icon: "assets/imgs/car12.png",
      title: name
    }
    let carMarker=this.myMap.addMarker(markerOptions)
      .then((marker: Marker) => {
        marker.showInfoWindow();
      });
      return carMarker;
  }

  addMarker(positionValue, name) {
    let markerOptions: MarkerOptions = {
      position: positionValue,
      icon: "",
      title: name
    }
    return this.myMap.addMarker(markerOptions)
      .then((marker: Marker) => {
        marker.showInfoWindow();
      });
  }
}

Now Run Your Application Using following commands:

projectFolder > ionic cordova run android

To Get the APK of the application run the build command as follows :

projectFolder > ionic cordova build android

Location of build file is :

your_application_Path/platforms/android/build/outputs/apk/android-debug.apk

Note:

1.This Application can run only in phone or emulator
2. Connect your phone before executing ionic run command 
3. Please make sure your application should be 
   A landing page in ionic blank application
   (or)
   one of the options in side menu 
   (or)
   one of the tab in ionic tabs application