Ionic + Google Maps: ReferenceError: google is not defined

I’m trying to integrate Google Maps in mi Ionic app, with no success so far. As far I have researched, this is something quite straightforward to achieve, so imagine my frustration… (sigh!). I plan to go with angular-google-maps as soon I can make the simple approach work, but for the moment I’m restraining to plain .js solution.

First problem I encountered was with the new cordova-whitelist feature. I thing I’ve come over that, but yet I can’t make things work.

Next is my code snippets:

config.xml:

....
  <access origin="*"/>
  <allow-navigation href="*://*.googleapis.com/*"/>
...

index.html:

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com;
      script-src 'self' https://*.googleapis.com 'unsafe-inline' 'unsafe-eval';
      style-src 'self' 'unsafe-inline';">
    <title></title>
...
    <!-- google maps -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>

map.html:

<ion-view ng-controller="MapController">
  <ion-content>
    <div id="map" class="map" data-tap-disabled="true"></div>
  </ion-content>
</ion-view>

MapController.js:

angular.module('myApp').controller('MapController', function MapController($scope) {

  console.log("Previous to initialize");

  google.maps.event.addDomListener(window, 'load', initialize());

  console.log("Not initialize");
  function initialize() {
    console.log("Initialize");
    var mapOptions = {
	.....
    };

    var map = new google.maps.Map(document.getElementById("map"),  mapOptions);
    $scope.map = map;
    }
});

app.js:

app.run(function($ionicPlatform, $state) {
...
  $ionicPlatform.ready(function() {
    console.log("Type of: "+ typeof google);
    if (typeof google === 'undefined' || typeof google === undefined) {
      console.log("Google maps unavailable");
    }
    console.log('APP STATE DEVICEREADY');
  });

});

So, what happens? Map doesn’t show on div and console log messages are like:

– On loading the app:

SystemWebChromeClient(11672): file:///android_asset/www/js/app.js: Line 161 : Type of: undefined
SystemWebChromeClient(11672): file:///android_asset/www/js/app.js: Line 163 : Google maps unavailable
SystemWebChromeClient(11672): file:///android_asset/www/js/app.js: Line 165 : APP STATE DEVICEREADY

– On accessing the controller:

I/Web Console(11672): Previous to initialize at file:///android_asset/www/js/controllers/MapController.js:6
E/Web Console(11672): ReferenceError: google is not defined
E/Web Console(11672):     at new MapController (file:///android_asset/www/js/controllers/MapController.js:8:3)

So, obviously, there is something I’m missing; but after several hours researching, I have no clue of what’s wrong.

Can someone please help me??

Thanks in advance

3 Likes

I know your feeling, I have spend 2 days and still geolocation doesn’t works on my device.

First what I will check will be *.js files and proper order in index.html.

Thanks for the empathy! :wink:

To clarify, which order do you suggest I should use to put the *.js files??

My (expanded) index.htm file looks like:

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com;
      script-src 'self' https://*.googleapis.com 'unsafe-inline' 'unsafe-eval';
      style-src 'self' 'unsafe-inline';">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- google maps -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers/AppController.js"></script>

    <!-- controllers -->
    <script src="js/controllers/MapController.js"></script>
    <script src="js/controllers/ConfigController.js"></script>

    <!-- cordova -->
    <script src="lib/ngCordova/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
  </head>
  <body ng-app="myApp" ng-controller="AppController">
    <ion-side-menus>
      <ion-side-menu-content>
        <ion-nav-bar class="bar-dark soil">
          <ion-nav-buttons>
            <button class="button button-icon" ng-click="toggleOptions()">
              <i class=" icon ion-navicon"></i>
            </button>
          </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
      </ion-side-menu-content>
      <ion-side-menu side="left">
        <tpip-menu></tpip-menu>
      </ion-side-menu>
    </ion-side-menus>
  </body>
</html>

I’ve also tried to put the google maps <script> tag just before the closing </body> tag, but not luck either.

If this is raw app for testing purpose, you can upload it on the github, I can try to solve your issue…

Thanks a lot for your interest in this issue.

I`ve created a very simple project (excluding cordova-whitelist, etc…) at https://github.com/chaviAtTfe/simpleIonicMapApp

It works in the browser demo (great for faster debugging, but…), yet I still can´t make it work on the emulator or on a real device.

Ok I checked your code and I found issue.

  1. go to your project and do “ionic plugin add cordova-plugin-whitelist”

  2. add meta e.g.

     <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">
    
  1. Head tag should looks like:
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
   
   <!-- your app's js -->
    <script src="js/app.js"></script>    

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script> 
  </head>
  1. your css like that:
/* Empty. Add your own CSS if you like */
.map {
  height: 100%;
  width: 100%;
}

.scroll {
  height: 100%;
}

.labels {
 color: black;
 
 font-family: "Lucida Grande", "Arial", sans-serif;
 font-size: 20px;
 text-align: center;
 width: 80px;     
 white-space: nowrap;
}

Now you can plug device, check if is on the list: >adb devices, then, ionic run android

Its working.

5 Likes

I’m about to cry … but because of relief!!

It worked!! :smiley:

So, what I’ve learned from this is:

1- cordova-plugin-whitelist --> My configuration wasn’t all that right, will have to study it.
2- There’s good people out there willing to help. So many thanks!! I owe you a beer (or two)

1 Like

Hi @chavi_at_tfe, @mikeon can you help me Please?? I have spent a long time =(

I have exactly the same problem who you talk in this tread Ionic + Google Maps: ReferenceError: google is not defined

I create a github with my code. (is the code of your github with the suggestion by @mikeon) but i cant run in the device…

Can you help me to find my wrongs? or maybe can you update your github with the full working code?

Thanks for your time!!

@lugomulish Sure I can help, but put link to your github code. I can dig into that but at the evening (now it’s 9 am). And also specify what device your have and version of system.

Hello @lugomulish ,

I’ve just updated the github ( https://github.com/chaviAtTfe/simpleIonicMapApp ) with the fixes suggested by @mikeon that make things work for me. Tested on a real device before pushing to verify everything works.

Hope it helps!!

Thanks @mikeon @chavi_at_tfe!!

The updated @chavi_at_tfe github works !.

Thanks to you I’m happy !!

mikeon I love you, you saved my ass :smiley:

Thank you so much it works perfectly

hi thanks for your discussion. it is very helpfull for me. please help me on why your putting "https://mts0.googleapis.com/ https://mts1.googleapis.com/ " mts0 mts1 in your meta tag for CSP.
it will very helpfull if you reply for it.

hi thanks for your discussion. it is very helpfull for me. please help me on why your putting "https://mts0.googleapis.com/ https://mts1.googleapis.com/ " mts0 mts1 in your meta tag for CSP.what this mts stands for ??

And one more help in your config.xml i have seen only extra thing is do i need to do extra here for launching third party app like android native map like


it will very helpfull if you reply for it.

Hi @mikeon , I’ve been struggling with getting the maps work on my ionic app and this is the same error I’m getting while installing the app on android. Could you please help me with it.
I’m building an angular based ionic app.

I put this “meta” that you suggested on my index.html, and I already had my whitelist set, however I’m getting this error, can you help me?

I post a better description on: ReferenceError: google is not defined