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%;
}
 
That’s everything you need to do, it’s as simple as that.
 
If you deploy this code inside a web browser (from your project folder of course):
 
ionic serve
 
You’ll see something like this:
 
Ionic 2 Google Maps Example
 

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 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(() => {
		    var minZoomLevel = 12;

		    this.map = new google.maps.Map(document.getElementById('map_canvas'), {
		        zoom: minZoomLevel,
		        center: new google.maps.LatLng(38.50, -90.50),
		        mapTypeId: google.maps.MapTypeId.ROADMAP
		    });
		});
	}  
}
 
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.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Bobby Naidu

    Above code new google.maps —google is not support in visual studio code ,can u please tell the solution.

    • Jeswin James

      Have you got the solution ? are you using ts ?

      • Bobby Naidu

        yes ,im using ts,after installing typings i got it

        • Jeswin James

          Possible to share the snippets and steps to follow… Am really stuck and new to ionic

          • Bobby Naidu

            yourprojecttypings>typings install google.maps –ambient

      • t_specht

        If you don’t want to install the typescript definition file, you could also just declare the google variable on top of your script as follows:
        declare var google: any
        This should stop typescript from giving an error and everything should work as expected.

  • Ajinkya Bhosale

    can you make tutorial on implementing native google map in ionic 2 ?

  • Áron Barócsi

    Did exactly as written, displays google maps container with the Google logo but its plain grey and no map is shown.

    • t_specht

      That’s exactly the problem I’m having right now. Did you find any solution yet?

    • Kp Abhiram

      add css file to it

  • James

    The instructions are a little hard to understand for a newbie:

    “Open app directory and remove all content from a directory called pages but don’t delete it. Somewhere below you’ll find a link to GitHub repo holding a working example (or you can copy past provided code). Download zipped project repo folder, copy app and www directory and past it into a newly created folder.”

    But after creating the project with “ionic start…” as instructed there is no app directory and no app/pages directory. So which directories are meant here?
    Also copying IN the app and www directories into the new root directory “Ionic2GoogleMaps” (I assume this is the “newly created folder”) – is that right? We are told to e.g. edit www/index.html but this is overwritten later on by “ionic serve”.

  • James

    Well, to answer my own question. Ionic2 has moved on, the app directory is now inside the src directory

  • BryanHeadrick

    article seems to be missing

    • That was probably a byproduct of my site beed hacked. Now everything should be back to normal. Though I will go through all my articles just to make sure that everything is ok.