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, 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 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

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