In this tutorial, you will learn, how to create a Google Map on your Ionic 2 Mobile application. Google Map is very popular among developers.

This tutorial uses the Google Map js file instead Ionic 2 native google map plugin. Why because the native google map plugin of Ionic 2 is not working. Actually, the native plugin is not generating the Google Map. That's why I choose the Google Map js file.

Google Map preview in Browser.

Google Map preview in Android(Genymotion emulator).

Google Map preview in iOS(iPhone SE Xcode Editor emulator).

Create a new Ionic 2 project using

ionic start gm blank --v2

Then install the  Google Map library using the below command.

cd gm
npm install @types/googlemaps --save-dev

After installing the Google Map library,  declare a variable in the home.ts file, before the class starting.

declare var google:any;

Then the use the below code to create a map object in the home.ts.

private initMap() {
var point = {lat: 13.038039, lng: 80.21597};
let divMap = (<HTMLInputElement>document.getElementById('map'));
this.map = new google.maps.Map(divMap, {
center: point,
zoom: 15,
disableDefaultUI: true,
draggable: false,
zoomControl: true
});

this.createMapMarker(point);
}

Here you can use your custom latitude and longitude.

Now use the below code to create a marker on the map.

private createMapMarker(place:any):void {
var marker = new google.maps.Marker({
map: this.map,
position: place
});
this.markers.push(marker);
}

The map object bound with HTML map id component. So create div inside the home.html file and name the id to map. And set the height of the div is to 100%

Open the home.html and place the code

<div id="map"></div>

Then open the home.scss file and add the below code.

page-home {

#map {
height: 100%;
}
}

The Full Source code of home.ts.

import { NavController } from 'ionic-angular';

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


declare var google:any;

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit{


map: any;
markers = [];

constructor(public navCtrl: NavController) {
}

ngOnInit() {
this.initMap();
}

private initMap() {
var point = {lat: 13.038039, lng: 80.21597};
let divMap = (<HTMLInputElement>document.getElementById('map'));
this.map = new google.maps.Map(divMap, {
center: point,
zoom: 15,
disableDefaultUI: true,
draggable: false,
zoomControl: true
});

this.createMapMarker(point);
}

private createMapMarker(place:any):void {
var marker = new google.maps.Marker({
map: this.map,
position: place
});
this.markers.push(marker);
}


}

Now add the Google Map js file to the index.html of www folder. Open the index.html and place the below code.

<script 
src="https://maps.googleapis.com/maps/api/js?v=3&key=XXXXX
&libraries=places"></script>

You have to replace the XXXX with your actual Google Map API Key. To get the API key, please go to the Google console using

https://console.developers.google.com/

Now create a new project in the google console.

Give a name for your project.

Now click the Google Maps Javascript API, which is located under the Google Map APIs

Then click the Enable API to enable the Google Map API

 
Once you enabled the Google Map API, you have to create a credential for this API. So click the create credentials.

Then click the what credentials do I need? to create the Google Map API key for Javascript.

That's all. Now you got the Google Map API key. Replace this key with the XXXX value in the index.html file.

Now you are ready to run this Ionic 2 Google Map project. To preview the application in browser use the below command.

ionic serve --lab

To preview the application in Android 

ionic platform add android
ionic run android

To preview the application in iOS emulator

ionic platform add ios
ionic run ios

The code is tested with the browser, Android, and iOS emulator. and the application is working fine. 

Below are the Ionic software information while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1