Several days ago one of my readers asked me to write a tutorial covering Google Maps and Ionic Framework. This is such a good topic; I don’t know why I haven’t thought of that myself, especially in light of my previous similar article about jQuery Mobile + Google Maps.
 
Update: 28.01.2016 - Article was updated to match latest Ionic v1 changes
 
 

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

Click here if you want to see other tutorials; or articles about Ionic themes, templates, plugins ...
 
 

Preparation

 
Warning: This tutorial was written when Cordova 4 was a standard. If you're using Cordova 5 or above you will need to install Cordova White List Plugin. Do this inside a project folder.
 
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' *">
 
Now proceed with everything else.
 
Before we can start using Google Maps we need to do few simple steps, I will show you example once everything is up and running.
 
  • Download angular-google-maps.js or install it using Bower:
 
Instructions Download Link
 
bower install angular-google-maps
 
Initialize them:
 
<script src='angular-google-maps.min.js'></script>
 
  • If you’re not using Bower you will need also to download/initialize lodash.js, its angular-google-maps.js dependency:
 
Link
 
<script src='lodash.min.js'></script>
 
  • Include the Google Maps API v3 into your application:
 
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
 
  • Initialize uiGmapgoogle-maps module inside your application:
 
var nameApp = angular.module('starter', ['ionic', 'uiGmapgoogle-maps']);
 
  • Add a map object to your page controller scope:
 
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
 
  • Add ui-gmap-google-map directive to application view content:
 
<ion-view view-title="Google Maps V3 example">      
    <ion-content data-tap-disabled="true">
        <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
    </ion-content>
</ion-view>
 
Warning: Ion-content data-tap-disabled='true' attribute is required if you don't want to verticaly scroll page while dragging map.
 
  • Set ui-gmap-google-map height:
 
.angular-google-map-container { 
  height: 100%; 
}
 
 

Example 1

 
I’m going to show you a simple map initialization example, next example will cover much more complex example.
 
Demo
 
Embedded working example:
 
Ionic Framework Google Maps example
 

HTML:

<html ng-app="starter">
 
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <title>Ionic Framework Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
  <link href="style.css" rel="stylesheet"/>
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="http://example.gajotres.net/include/angular-google-maps/angular-google-maps.min.js"></script>
  <script src="http://example.gajotres.net/include/loadsh/lodash.min.js"></script>
  <script src="script.js"></script>
</head>
 
<body>
  
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
      <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
  </ion-nav-bar>
  
  <ion-nav-view></ion-nav-view>
  
  <script id="home.html" type="text/ng-template">
    <ion-view view-title="Google Maps V3 example">  
    
      <ion-content>
    
        <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
        
      </ion-content>
      
    </ion-view>
  </script>  
  <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
</body>
 
</html>
Continue Reading

  • Valeriu

    Thanks for the tutorial!
    However, I needed to add a few more styles to my CSS, on top of angular-google-map-container, in order to see the map:

    #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
    }

    .scroll {
    height: 100%;
    }

  • Francis Pena

    Hi and thank you for your excellent article. I have a little problem and was hoping you can help. So the maps loads up fine on the browser but when loading on a iphone or android device I get “Sorry, we have no imagery here” in the map tiles. whenever I move around the map all I see is this message unless I zoom in, at which point I can see the map but still have this nasty message. Thanks in advance

    • I never so this error though I heard of it. I think you have probably some kind of network problem and an application can’t access google maps service. Some of tile images are still stored in the cash so you can see them when you zoom far enough. On the other hand, your default zoom level is not equal to stored images level so that’s why an application is showing mentioned error.

      My advice, go to StackOverflow and look for this error. If you still cant find a proper solution post a question, Ionic Framework community is very active, someone will help you as soon as possible.

      • Francis Pena

        Problem found. So I had these lines in my config.xml because maps wouldn’t load at all without them.

        I ended up commenting them out and adding which is not safe. But until I can figure out a better solution this helped.

        • Francis Pena

          replaced these

          with this
          “”

          • In what file? I don’t understand the context.

  • Francis Pena

    sorry apparently your site removes code from comments.

    replace these
    <!—->
    <!—->
    <!—->

    for this
    <!–

  • Ramadhevi Rk

    hey!!
    How to get my friend’s location using this api?

    • You can’t do that using only this API. First your friend must share his/hers location with you. This is usually done via some kind of server component as this is the only correct way were two client apps can communicate together.

      • Ramadhevi Rk

        okay!!

  • Jomabell Lascano

    How can I install this?

    bower install angular-google-maps

    bower ENOGIT git is not installed or not in the path? :3 this is the result when I paste the command in cmd
    can someone help me ? Advance Thank you .

    • Simply Google this error, it’s a common one. In a few words, your missing GIT installation or it can’t be found in your environment PATH.

    • Chris

      You´l need to do the path of GIT, I got the same problem

  • Chris

    Hi there, I´ve got some troubles when the maps is rendering, he´s open hidded so we can see, the console is clean, do you have any ideia what could happened? Thanks by the tutorial and help

  • Jakub Nowak

    What about api usage limits?

  • Carlos Roso

    this worked for me too. thanks!

  • Hallo, I very impressed with this article, but i have little question. is it still working on android device ?

  • Brasilian Programmer

    hello, I followed your article but not work well. On browser it is working but on device no. Can you help me?

    • Thank you, I’ve updated this article.

      First you can now download a working example directly from a GitHub repo: https://github.com/Gajotres/IonicGoogleMapsExample

      GitHub repo README.md also holds a detailed how to tutorial.

      Changes made over the last time:

      1. If you’re using Cordova 5.0 or above you need Cordova Whitelist Plugin
      2. For some reason, some Android devices required these permissions set in AndroidManifest.xml:

      • Nuatga

        I have tried this code but this is not working on my mobile deveice what is the reason?

      • Nuatga

        I have tried this this also not working on my android device

  • Bharat Lal Sahu

    Hi, I followed your article instruction but it throwing error that :

    ReferenceError: _ is not defined

    at new (angular-google-maps.min.js:5)

    at invoke (ionic.bundle.js:17762)

    at Object.instantiate (ionic.bundle.js:17770)

    at Object. (ionic.bundle.js:17631)

    at Object.invoke (ionic.bundle.js:17762)

    at Object.enforcedReturnValue [as $get] (ionic.bundle.js:17615)

    at Object.invoke (ionic.bundle.js:17762)

    at ionic.bundle.js:17580

    at getService (ionic.bundle.js:17721)

    at Object.invoke (ionic.bundle.js:17753)(anonymous function) @ ionic.bundle.js:25642(anonymous function) @ ionic.bundle.js:22421(anonymous function) @ ionic.bundle.js:20272forEach @ ionic.bundle.js:13648(anonymous function) @ ionic.bundle.js:20251invoke @ ionic.bundle.js:17762enforcedReturnValue @ ionic.bundle.js:17615invoke @ ionic.bundle.js:17762(anonymous function) @ ionic.bundle.js:17580getService @ ionic.bundle.js:17721addDirective @ ionic.bundle.js:21520collectDirectives @ ionic.bundle.js:20901compileNodes @ ionic.bundle.js:20767compileNodes @ ionic.bundle.js:20783compileNodes @ ionic.bundle.js:20783compile @ ionic.bundle.js:20678(anonymous function) @ ionic.bundle.js:14947Scope.$eval @ ionic.bundle.js:29158Scope.$apply @ ionic.bundle.js:29257bootstrapApply @ ionic.bundle.js:14945invoke @ ionic.bundle.js:17762doBootstrap @ ionic.bundle.js:14943bootstrap @ ionic.bundle.js:14963angularInit @ ionic.bundle.js:14857(anonymous function) @ ionic.bundle.js:41671trigger @ ionic.bundle.js:16308eventHandler @ ionic.bundle.js:16583

    ionic.bundle.js:25642 Error: [ng:areq] Argument ‘IndexCtrl’ is not a function, got undefined

    http://errors.angularjs.org/1.4.3/ng/areq?p0=IndexCtrl&p1=not%20a%20function%2C%20got%20undefined

    at ionic.bundle.js:13380

    at assertArg (ionic.bundle.js:15082)

    at assertArgFn (ionic.bundle.js:15092)

    at ionic.bundle.js:22287

    at setupControllers (ionic.bundle.js:21349)

    at nodeLinkFn (ionic.bundle.js:21389)

    at compositeLinkFn (ionic.bundle.js:20853)

    at publicLinkFn (ionic.bundle.js:20728)

    at ionic.bundle.js:14947

    at Scope.$eval (ionic.bundle.js:29158)(anonymous function) @ ionic.bundle.js:25642(anonymous function) @ ionic.bundle.js:22421Scope.$apply @ ionic.bundle.js:29259bootstrapApply @ ionic.bundle.js:14945invoke @ ionic.bundle.js:17762doBootstrap @ ionic.bundle.js:14943bootstrap @ ionic.bundle.js:14963angularInit @ ionic.bundle.js:14857(anonymous function) @ ionic.bundle.js:41671trigger @ ionic.bundle.js:16308eventHandler @ ionic.bundle.js:16583

    help me to resolve it. Thanks in advance.

    • I don’t know what to tell you, this code works just fine if you follow the instructions. I retested it last night just to be sure everything is working correctly.

      There can be several reasons for this problem:

      1. Your nodeJs, Ionic, Cordova is not up to date
      2. Application can’t load lodash.min.js
      3. Intenet conenction problems

      • Bharat Lal Sahu

        thanks for reply. I will check it for firewall and lodash.min.js

        • Ajay

          Install dependency angular angular-simple-logger error will be fixed.

      • Bharat Lal Sahu

        I checked all things, but it still having the error :

        ReferenceError: _ is not defined
        at new (angular-google-maps.min.js:5)

        I haven’t added lodash.min.js in my application, because I installed via bowers and in this article clearly mention that :

        If you’re not using Bower you will need also to download/initialize lodash.js, its angular-google-maps.js dependency:

        • Sorry but I don’t know how to help you anymore. My example works just fine, I don’t know what could be a problem in your case.

  • touins

    Hi , thanks for this amazing tutorial , i tried to run it on Android based on your Gitub source and applied the manifest but when i run it doesn’t appear ( its appear like white space ) , thanks for help again …

  • Prasta Wahyu

    Hi, thanks for the great tutorial, but do we suppose to put Google API key first?
    And could you suggest API key type has to create ex: browser, android or iOS?. For phonegap project.