IONIC V3 & ANGULAR 5 | GOOGLE MAP IN IONIC | ADVANCE

Share the post
Google_maps_using_ionic3_angular5

GOOGLE MAP IN IONIC | ADVANCE

Today, We will see How to implement google map in Ionic 3 & Angular 5? Here We will see what steps we have to take to display google maps in android & browser build.

Please follow the below steps to implement google maps in ionic:

1 . Generate a new page for google maps by using the following commands :

Open your terminal in Visual Studio Code & Write the following command :

ionic g page gmaps

you can see here all shortcut CMD commands to generate new pages, component & directive in ionic 3.

2.In app.module.ts import gmaps page by following way  :


import { GmapsPage } from ‘../pages/gmaps/gmaps’;

@NgModule({

  declarations: [

    MyApp,

    HomePage,

    GmapsPage

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

    IonicModule.forRoot(MyApp),

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    HomePage,

    GmapsPage

  ],

  providers: [

    StatusBar,

    SplashScreen,

    { provide: ErrorHandler, useClass: IonicErrorHandler }

  ]

})

export class AppModule { }

3.Create Side menu option for goolge maps in app.component.ts :

       
import { GmapsPage } from '../pages/gmaps/gmaps';

@Component({

  templateUrl: ‘app.html’

})

export class MyApp {

  @ViewChild(Nav) nav: Nav;

  rootPage: any = LoginPage;

  pages: Array<{ title: string, component: any }>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {

    this.initializeApp();

    // used for an example of ngFor and navigation

    this.pages = [

      { title: ‘Home’, component: HomePage },

      { title: ‘Map’, component: GmapsPage }

    ];

  }

4. In gmaps.html write following code :

<ion-content padding>

  <div #mymap class=”mymap” ></div>

</ion-content>

5.In gmaps.scss write simple css as follows :

       
.mymap{

    width: 100%;

    height: 100%;

    }

6.In index.html copy the below line to implement google APIs & put your google API key on the below option 

Note: Remember to write google API script tag before cordova.js:

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

<script src=”cordova.js”></script>

   Please find below the procedure to generate the google maps API key.

  7.To generate a google API key Please follow the below steps :

We have already discussed the same topic in Google Maps Using HTML & JavaScript. Please follow the below steps to get your own API Key :

  • Please login to Google Cloud Platform Console using your google email & password.
  • Go to Credentials Section & Click on Create new API key.
  • After that, the unique code has been automatically generated by google which further you can use in the Google API key to show maps.
  • Don’t forget to Enable Maps JavaScript API under the APIs section without this you can’t show google maps on your website.

    8.Install GoogleMaps npm package as follows :

    npm install @types/googlemaps –save-dev

    9.copy below code in gmaps.ts :

       
import { Component, ViewChild, ElementRef } from '@angular/core';

import { IonicPage, NavController, NavParams } from ‘ionic-angular’;

import {} from ‘@types/googlemaps’;

/**

 * Generated class for the GmapsPage page.

 *

 * See https://ionicframework.com/docs/components/#navigation for more info on

 * Ionic pages and navigation.

 */

@IonicPage()

@Component({

  selector: ‘page-gmaps’,

  templateUrl: ‘gmaps.html’,

})

export class GmapsPage {

  @ViewChild(‘mymap’) mapEle: ElementRef;

  mymap: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {

    this.init();

  }

  init() {

    let latlong = new google.maps.LatLng(19.0760, 72.8777);

    this.mymap = new google.maps.Map(this.mapEle.nativeElement, {

      zoom: 5,

      center: latlong

    });

  }

}

Steps we have to take to display google maps in android  :

From using the above code & logic you can able to implement Google maps in your ionic 3 mobile application. If you want to run the app on android.. you have to add platform android & after that, you can simply build & run on an android phone.

Leave a Comment