As you can see from this example, initializeMap function will trigger only when IonView component is loaded.
 
Google maps require a div container for a map to be drawn on, we will call it map_canvas:
 
<ion-content>
	<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:
 
page-home {
	#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
 
I will not try to explain to you how Google Maps Javascript API works, that’s something you can do on your own.
 
But there’s one thing I forgot to mention. As we are mixing TypeScript and vanilla Javascript we will get an error “Cannot find name google” and it’s a reference to this line:
 
 
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
 
Typescript doesn’t know how to interpret object google. to fix this we need to add this line:
 
 
declare var google;
 
This is a way of telling Typescript “Quit complaining, this variable exists somewhere in JavaScript”.
 

Source Code

 
In case GitHub repo is not available and you can only use code provided below, this is what project folder looks like (image was taken from Sublime text editor):
 
Ionic 2 Google Maps Folder Structure
 
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, 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 rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
  
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBN__TGV0kdA7nwr1Nimjqi8XyqIPmF7zA" type="text/javascript"></script>
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>
 
home.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

declare var google;

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

	map: any;

	constructor(private platform: Platform) {

	}

	ionViewDidLoad(){
		this.initializeMap();
	}

	initializeMap() {

		let locationOptions = {timeout: 20000, 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
		);
	} 	
}
 
home.html
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Google Maps Example
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
	<div id="map_canvas"></div>
</ion-content>
 
home.scss
page-home {
	#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
 
or if you want to test it in your browser:
 
ionic serve -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.



  • 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

    • You’re right, I have udpated my article one month ago to reflect current Ionic changes.

  • 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.

  • Pepito Perez

    Nice!! Thanks for the tutorial, but I cant see the blue dot!