This guide will walk you through writing a simple Ionic framework application that utilizes Google Maps JavaScript API. It is also important to mention that we will cover what is now known as Angular (Angular 2|4), not what was used to be known as Angular 1. If you came here for the original Ionic 1 example them please find it here.
 
You will also be able to learn how to use 3rd party JavaScript libraries with the Ionic framework. On the other hand, if you came here looking for a Native Ionic solution then, by all means, find it here.
 
This guide will not require a real smartphone device as Google Maps Javascript API works in all modern browsers, but I encourage you to try it anyway.
 
 

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

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 here, leave me a comment and I’ll cover it.
 
 

Preparations

 
You should have everything set up and working before we can begin.
 
Make sure you 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

 
As we are working with the NodeJS make sure you have the latest version, without it, you’ll not be able to install/update Cordova and Ionic appropriately. Worst case scenario, have as recent version as possible.
 
If you already have a working Ionic environment make sure it’s up to date, older versions may not work with this guide. Though sometimes, the latest versions may also mess things up, it’s up to you:
 
npm install -g ionic cordova
 
or to do a simple update:
 
npm update -g ionic cordova
 
 

2. Create A New Project

 
ionic start IonicGoogleMaps blank
cd IonicGoogleMaps 
 
You can find a working example at the end of this article if you’re an impatient type. Just follow the provided README.md instructions.
 
Warning: As some of you don't have a prior Ionic CLI experience, from this point and on, every time I tell you to execute something, do that inside an example project folder.
 

3. Add A Required Platform

 
Add Android platform:
 
ionic cordova platform add android
 
MacOS users can also add iOS platform:
 
ionic cordova platform add ios
 

Example

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

Source Walkthrough

 
Before we can do anything, we need to include Google Maps Javascript API SDK library. Go to your new project, open src folder and edit index.html. Add this line just above cordova.js line:
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<API KEY GOES HERE>" type="text/javascript"></script>
 
It should look like this:
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<API KEY>" type="text/javascript"></script>
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
 
If you carefully look, you’ll notice that provided Google Maps link is not correct. That’s because it’s missing an API key, acquire it here. Just follow the instructions as it’s free of charge.
 
If your Google Maps link 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 are now ready to activate a map. For that, we need to wait for a right moment. Before we would do it during Platform device ready state but it is no longer available. Instead, we will use ionViewDidLoad function. This name tells you everything, it will trigger when IonView component is loaded.
 
ionViewDidLoad(){
	this.initializeMap();
}
 
Function content looks like this:
 
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
	);
}
 
Continue to the next page