In my previous article, I showed you how to integrate Cordova plugins into your Ionic 2 application. Now let’s expand this topic a bit; I’ll show you how to integrate Google Maps.
 
We’re going to discuss this subject from two different aspects. The first one will cover pure JavaScript Google Maps integration; for those of you who don’t like Cordova plugins. A second one will cover Cordova Geolocation Plugin.
 
This article will also show you how to integrate 3rd party JavaScript libraries with Ionic 2; though I’ll talk more about this topic in my upcoming article.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Ionic 2 is causing you problems? Are you struggling to make it work? Trust me, I wasn’t in any better situation. If you require more information beyond the subject of this article you will probably find it in a list below. Take a look; if there’s a topic not covered there, leave me a comment and I’ll cover it.
 
 

Preparations

 
Before we can begin, make sure you have everything preconfigured for Ionic 2.
 
You should have these:
 
  • Android Environment (or iOS if you’re working on a MacOS)
  • nodeJS
  • Ionic 2
  • Cordova
 
Find more information here: IONIC 2 | INSTALLATION GUIDE if you don’t have a previous Ionic 2 installation or if you have never read my previous articles on this topic.
 

1. Update Ionic & Cordova

 
You need to have a latest nodeJS version, without it, you’ll not be able to install/update Cordova and Ionic appropriately.
 
If you have a previous Ionic/Cordova installation make sure its up to date, older versions may not work with this tutorial. Though latest versions may also mess things up:
 
npm install -g cordova ionic@beta
 
or you can even do it like this:
 
npm update -g cordova ionic@beta
 
I will remove beta keyword once Ionic 2 reach RC status.
 
Warning: Ionic2 is still in alpha status so the final implementation may differ from this code. I will update this article if and when that happens.
 
 
 

2. Create A New Project

 
ionic start Ionic2GoogleMaps blank --v2
cd Ionic2GoogleMaps
 
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.
 
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
 
Add Android platform:
 
ionic platform add android
 
MacOS users can also add iOS platform:
 
ionic platform add ios
 

3. Install Cordova Whitelist Plugin

 
Install Cordova Whitelist Plugin:
 
cordova plugin add cordova-plugin-whitelist
 
Open www folder and add this security meta tag to index.html file:
 
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
 
Be careful, don’t do this step before you add designated platform(s) (Android/iOS).
 
GitHub - Whitelist
 
 
Install Whitelist plugin only if you’re using Cordova 4.0 +. Without it, you’ll receive “Application Error: There was a network error.” error.
 

Example

 
First take a look at this embedded example:
 
Ionic 2 Google Maps Example
 

Source Walkthrough

 
If we want to work with Google Maps we first need to include SDK library. Go to the www directory and open index.html file. Add this line just above cordova.js line:
 
<script src="http://maps.google.com/maps/api/js"></script>
 
It should look like this:
 
<script src="http://maps.google.com/maps/api/js"></script>
<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>
 
If you have a link that looks like this:
 
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
 
Remove sensor parameter, it’s no longer important, Google Maps library will throw an error if you leave it as it is. Error looks like this:
 
Google Maps API warning: SensorNotRequired: https://developers.google.com/maps/documentation/javascript/error-messages
 
We still have one major step before we start with implementation. If you intend to use this code inside a mobile application it’s important to initialize it after platform (device) is ready (this step is not essential if you’re woking on a classic desktop application). For this, we will need to use Ionic Platform service. It’s a set of utility methods that can be used to retrieve the platform (device) ready state and several other information. It’s also important to understand that Ionic v2 has a somewhat different implementation of Platform service then v1.
 
First let’s import Platform service:
 
import {Page, Platform} from 'ionic/ionic';
 
Then inject it into MapPage class constructor:
 
constructor(platform: Platform) {
    this.platform = platform;
 
During this phase we’ll also initialize our map using this function:
 
this.initializeMap();  
 
Function content looks like this:
 
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
	    });
	});
} 
 
Continue to the next page

  • 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

  • kolexinfos

    I am working in ts files and cannot get this to work, I think if the tech community continues this way changing things around without care for devs who are just setting newly on a framework, they would just go away easily…. you cant even generate a JS project only ts can be generated which makes all this tutorial useless, no offense to the writer but it is just frustrating getting thiese things to work