GOOGLE MAPS IN IONIC 3

Share the post

GOOGLE MAPS IN IONIC 3 | ADVANCE

Today, We will see How to implement Google Maps 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, components & directives 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 google 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 the 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';
@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 it on an android phone.

Leave a Comment