As you can see from this example, initializeMap function will first wait for platform ready event, only then it will proceed with map initialization.
 
Google maps require a div container for a map to be drawn on, we will call it map_canvas:
 
<ion-content class="home">
  <div id="map_canvas"></div>
</ion-content>
 
Last but not least, a div tag is a block element and it requires predefined width and height:
 
#map_canvas {
    width: 100%;
    height: 100%;
}
 
Once executed, Function initializeMap will first try to acquire your position using geolocation method navigator.geolocation.getCurrentPosition. This method accepts two anonymous callback functions and a third options object. Just to make sure you understand this part, anonymous callback functions don’t have the name.
 
These callback functions are asynchronous in nature, meaning, the rest of code will not wait for the result. Once the result has been acquired, or error is thrown, it will trigger anonymous callback function.
 
A successful call will trigger first function:
 
(position) => {

	let options = {
	  center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
	  zoom: 16,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	}

	this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
},
 
Where an unsuccessful call will trigger a second function:
 
(error) => {
	console.log(error);
}, locationOptions
 
If everything is ok, the first function will get a position object, which holds device geolocation data. We can use these data to show us our location on google Maps:
 
let options = {
  center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
  zoom: 16,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
 
Last but not least, a third navigator.geolocation.getCurrentPosition method parameter is an options object. It’s important because it holds timeout and enableHighAccuracy parameters.
 
Don’t change values of these parameters if everything works ok. But if your application is unable to acquire a location you should increase timeout parameter (do it gradually until you make it work). Better devices usually require a lower timeout setting but some slower devices can demand up to 60000 (60 seconds).
 

Source Code

 
Update: 28.01.2016 - Article and example are updated to match changes made to Ionic Alpha 52 version
 
In case GitHub repo is not available and you can only use code provided below, this is what project folder looks like (image taken from Sublime text editor):
 
Ionic 2 Google Maps Folder Structure
 
index.html
<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <title>Ionic</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
</head>

<body>
  <ion-app></ion-app>
  <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script src="cordova.js"></script>
  <script src="build/js/app.bundle.js"></script>
</body>

</html>
 
app.html
<ion-nav [root]="root"></ion-nav>
 
app.js
import {App, Platform, Config} from 'ionic/ionic';
import {MapPage} from './pages/mapPage/mapPage';

@App({
  templateUrl: 'build/app.html'
})

export class MyApp {
  constructor(platform: Platform) {
    this.platform = platform;
    this.initializeApp();

    this.root = MapPage;
  }

  initializeApp() {
    this.platform.ready().then(() => {
      console.log('Platform ready');
    });
  }
}
 
app.core.scss
@import "pages/mapPage/mapPage";
 
mapPage.html
<ion-navbar *navbar>
  <ion-title>
    Map Example
  </ion-title>
</ion-navbar>

<ion-content class="home">
  <div id="map_canvas"></div>
</ion-content>
 
mapPage.js
import {Page, Platform} from 'ionic/ionic';

@Page({
  templateUrl: 'build/pages/mapPage/mapPage.html',
})

export class MapPage {
	
	constructor(platform: Platform) {
		this.platform = platform;

		this.initializeMap();    
	}

	initializeMap() {

		this.platform.ready().then(() => {

			let locationOptions = {timeout: 10000, enableHighAccuracy: true};

			navigator.geolocation.getCurrentPosition(

				(position) => {

					let options = {
					  center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
					  zoom: 16,
					  mapTypeId: google.maps.MapTypeId.ROADMAP
					}

					this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
				},

				(error) => {
					console.log(error);
				}, locationOptions

			);

		});
	}  
}
 
mapPage.scss
#map_canvas {
    width: 100%;
    height: 100%;
}
 

Deployment

 
Next step, build our application:
 
ionic build android
 
Be careful here, this step may break if you’re behind a firewall. The first execution will take a long time, so be patient.
 
Finally:
 
ionic run android -l -c -s
 

Download The Code

 
Working GitHub repo link can be found below:
 
GitHub
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



  • Nuatga

    I have tried this example but this is not working on android device what is the reason?

  • Suresh

    Hi,
    Is it possible to use this Plugin to check if the GPS Module is enabled on the device. Or is there any other plugin which i could use to check this.
    Thanks
    Suresh