Ionic 3 Javascript API Google Maps

Ionic 3 Java-script API Google Maps 

Used Google Maps API : 

API Used : Java script API.

Include the following script tag in index.html of Ionic project

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Create a page for in ionic as follow

Use : ionic g page googleMaps

Copy the following html code into GoogleMapsPage.html

<ion-header>

  <ion-navbar color="primary">
    <ion-title>Google Maps</ion-title>
  </ion-navbar>

</ion-header>

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

Create a provider by using following command

ionic g provider mapService

Copy the following code into your mapService.ts

import { Injectable } from '@angular/core';

declare const google;

@Injectable()
export class MapServiceProvider {
  map: any;
  masterArray = [
    [
      {
        lat: 17.439930,
        lng: 78.498274
      },
      {
        lat: 17.449104,
        lng: 78.533762
      },
      {
        lat: 17.433617,
        lng: 78.523391
      },
      {
        lat: 17.428310,
        lng: 78.538610
      },
      {
        lat: 17.409627,
        lng: 78.544114
      },
      {
        lat: 17.398377,
        lng: 78.558265
      },
      {
        lat: 17.505141,
        lng: 78.686673
      },
      {
        lat: 17.589384,
        lng: 78.944463
      },
      {
        lat: 17.640161,
        lng: 79.036254
      },
      {
        lat: 17.728839,
        lng: 79.160497
      }
    ],
    [
      {
        lat: 17.327113,
        lng: 78.591241
      },
      {
        lat: 17.189853,
        lng: 78.648384
      },
      {
        lat: 17.166453,
        lng: 78.633490
      },
      {
        lat: 17.154468,
        lng: 78.619879
      },
      {
        lat: 17.152554,
        lng: 78.619304
      },
      {
        lat: 17.172619,
        lng: 78.678166
      },
      {
        lat: 17.179816,
        lng: 78.676748
      },
      {
        lat: 17.250437,
        lng: 78.897704
      },
      {
        lat: 17.162117,
        lng: 78.880725
      },
      {
        lat: 17.131876,
        lng: 78.946148
      },
      {
        lat: 17.163398,
        lng: 78.930238
      },
      {
        lat: 17.145802,
        lng: 78.967711
      },
      {
        lat: 17.175176,
        lng: 79.213392
      },
      {
        lat: 17.188300,
        lng: 79.199995
      },
      {
        lat: 17.249467,
        lng: 79.280350
      },

    ],
    [
      {
        lat: 17.447412,
        lng: 78.376230
      },
      {
        lat: 17.466955,
        lng: 78.426801
      },
      {
        lat: 17.512511,
        lng: 78.352228
      },
      {
        lat: 17.519375,
        lng: 78.343686
      },
      {
        lat: 17.514243,
        lng: 78.336928
      },
      {
        lat: 17.511118,
        lng: 78.335173
      },
      {
        lat: 17.519876,
        lng: 78.328440
      },
      {
        lat: 17.523049,
        lng: 78.342708
      },
      {
        lat: 17.563006,
        lng: 78.402204
      },
      {
        lat: 17.589888,
        lng: 78.415503
      },
      {
        lat: 17.626924,
        lng: 78.401286
      },
      {
        lat: 17.662307,
        lng: 78.363656
      },

    ],
    [
      {
        lat: 17.358717,
        lng: 78.298739
      },
      {
        lat: 17.326828,
        lng: 78.274666
      },
      {
        lat: 17.312370,
        lng: 78.138541
      },
      {
        lat: 17.336430,
        lng: 77.904848
      },
      {
        lat: 17.516485,
        lng: 77.898175
      },
      {
        lat: 17.540330,
        lng: 77.766665
      },
      {
        lat: 17.599537,
        lng: 77.713731
      },
      {
        lat: 17.663518,
        lng: 77.713731
      },
      {
        lat: 17.674811,
        lng: 77.616380
      },
      {
        lat: 17.647849,
        lng: 77.467329
      },
      {
        lat: 17.522773,
        lng: 77.295824
      },

    ],
    [
      {
        lat: 17.630222,
        lng: 78.484213
      },
      {
        lat: 17.771325,
        lng: 78.625688
      },
      {
        lat: 17.907449,
        lng: 78.460985
      },
      {
        lat: 17.971636,
        lng: 78.460985
      },
      {
        lat: 18.080308,
        lng: 78.668240
      },
      {
        lat: 18.101904,
        lng: 78.852077
      },
      {
        lat: 18.007129,
        lng: 78.890629
      },
      {
        lat: 18.063871,
        lng: 79.039080
      },
      {
        lat: 18.195689,
        lng: 79.017887
      },

    ]
  ]

  constructor() {

  }

  setMap(elementId) {
    console.log("inside setMap");
    this.map = new google.maps.Map(elementId, {
      center: new google.maps.LatLng(this.masterArray[0][0]),
      zoom: 10,
      mapTypeId: 'roadmap'
    });
  }

  displayMapData() {
    for (let j = 0; j < this.masterArray.length; j++) {
      console.log("j value" + j);
      let polylines: Array<object> = [];
      let multiMarker: Array<object> = [];
      for (let i = 0; i < this.masterArray[j].length; i++) {
        console.log("i value : " + i);
        let posMaceio = this.masterArray[j][i];
        polylines.push(posMaceio);
        if (i == 0 || i == this.masterArray[j].length - 1) {
          multiMarker.push(this.masterArray[j][i]);
        }
      }
      console.log("polylines : " + JSON.stringify(polylines));
      console.log("multiMarker : " + JSON.stringify(multiMarker));

      this.addMarker(multiMarker);
      if (j == 0) {
        let color = '#006400';
        this.addPolyLine(polylines, color, this.map);
      }
      if (j == 1) {
        let color = '#FF0000';
        this.addPolyLine(polylines, color, this.map);
      }
      if (j == 2) {
        let color = '#0000FF';
        this.addPolyLine(polylines, color, this.map);
      }
      if (j == 3) {
        let color = '#A52A2A';
        this.addPolyLine(polylines, color, this.map);
      }
      if (j == 4) {
        let color = '#000000';
        this.addPolyLine(polylines, color, this.map);
      }
      if (j == 5) {
        let color = '#FF8C00';
        this.addPolyLine(polylines, color, this.map);
      }
      if (j == 6) {
        let color = '#CCCC00';
        this.addPolyLine(polylines, color, this.map);
      }
    }
  }

  addMarker(multiMarker) {
    let marker = new google.maps.Marker;
    let marker2 = new google.maps.Marker;
    if (multiMarker.length == 2) {
      console.log("multiMarker of length 2: " + JSON.stringify(multiMarker));
      for (var k = 0; k < 2; k++) {
        console.log("k value : " + k);
        marker.setMap(this.map);
        marker.setPosition(multiMarker[0]);
        marker2.setMap(this.map);
        marker2.setPosition(multiMarker[1]);
      }
    }
    else if (multiMarker.length == 1) {
      console.log("multiMarker of 1 " + JSON.stringify(multiMarker));
      marker.setMap(this.map);
      marker.setPosition(multiMarker[0]);
    }
  }
  addPolyLine(latLng: any, color, map) {
    let polyLineMap = map;
    let polylinesData = latLng;
    console.log("polylines wholedata : " + polylinesData);
    if (polylinesData.length > 1) {
      let flightPath = new google.maps.Polyline({
        path: polylinesData,
        geodesic: true,
        strokeColor: color,
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      flightPath.setMap(polyLineMap);
    }
  }
}

Copy the following type script into your GoogleMapsPage.ts

import {
  Component,
  ViewChild,
  ElementRef
} from '@angular/core';
import {
  IonicPage,
  NavController,
  PopoverController,
} from 'ionic-angular';
import { MapServiceProvider } from '../../providers/map-service/map-service';


@IonicPage()
@Component({
  selector: 'page-google-maps',
  templateUrl: 'google-maps.html',
  providers: [MapServiceProvider]
})
export class GoogleMapsPage {

  @ViewChild('map') mapElement: ElementRef;

  constructor(public navCtrl: NavController, public mapService: MapServiceProvider, public popOverCtrl: PopoverController) {

  }

  ionViewDidLoad() {
    this.startMap();
  }

  startMap() {
    this.mapService.setMap(this.mapElement.nativeElement);
    this.mapService.displayMapData();
  }
}