Angular Google Maps running in Cordova/Phonegap issue

Question

I am doing a project with the following techs: phonegap (v 4.1.2), angular (v 1.3.0) and onsen ui (v1.2.1).

I am really having a hard time to include Angular Google Maps on it. I am really lost because I am no receiving any log to follow.

I am going to write the steps I have followed in order to hopefully anyone notice where is the mistake.

First, I always like to start with a simple example, so I decided to create a sample project. I used this:

http://angular-ui.github.io/angular-google-maps/#!/use

I create my phonegap project structure, follow the instructions and voilá, the map appears correctly.

Then, it's time to include the code in the project. it consists in the following elements (I will write which I think are important to the issue, if any more info is required I will add it later)

File: index.html

<script src="components/onsen/js/angular/angular.js"></script>    
<script src="lib/onsen/js/onsenui.js"></script>  
<script src="components/lodash/lodash.js"></script>
<script src="components/angular-google-maps/angular-google-maps.js"></script>
<script src="cordova.js"></script>

<!--modules-->
<script src="app.js"></script>

<!--controllers-->
<script src="controllers/updateCtrl.js"></script>
<script src="controllers/geoCtrl.js"></script>

File: geolocalizacion.html

<ons-page on-device-backbutton="menu.setMainPage('main.html', {closeMenu: true});">
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()">
        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
      </ons-toolbar-button>
    </div>

      <div class="center">Geolocalizaci&oacute;n</div>
  </ons-toolbar>

  <div id="map_canvas" ng-controller="GeoCtrl">
    <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
  </div

</ons-page>

File: app.js

//App module
angular.module('app', ['onsen', 'angularLocalStorage', 'ngSanitize', 'uiGmapgoogle-maps']);

//Configs

//Google Maps SDK
angular.module('app').config(function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: 'xxx',
        v: '3.17',
        libraries: 'weather,geometry,visualization'
    });
});

File geoCtrl:

angular.module('app').controller('GeoCtrl', function($scope, uiGmapGoogleMapApi, uiGmapLogger){
    console.log('Loading geoCtrl');
    uiGmapGoogleMapApi.then(function(maps) {
        $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
        console.log('map: ', maps);
    });
});

It seems to be all correct, nothing is shown is logs. I have used the same api key for the sample app and the project, but I think this is allowed. The logs 'Loading geoCtrl' is appearing, and the 'map:' is appearing blank, but the same occurs in the sample app but even though the map appears.

Any idea what can I test, what is wrong or any little hint. I am pretty new to angular developement, I think this is importan to mention to.

Thanks in advance guys for your time.

Regards, Néstor

Answer 1

Finally I found out what was happening. There was no problem with the code posted. The error was mine, I was missing some css code to display the map.

css:

.angular-google-map-container { height: 400px; }