ngCordova getCurrentPosition with Google Maps API

ionic-v1
1

Hello ionic folks,
I am have too hard of a time figuring what I am doing wrong w/ simply grabbing my current location, then posting it to my app. To start, all I have done is simply deployed the sidemenu starter and added controllers/services to handle getting my current location (which yes, i know is an asynchronous request). So, here is my snippet code in my ionic template (playlists)

<ion-view view-title="Playlists">
  <ion-content data-tap-disabled="true">
    <div ng-controller="MapCtrl" id="map">
    </div>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

So cool…I have a controller (MapCtrl) that will handle this request.

.controller('MapCtrl', function($scope,LocationService ) {
  ionic.Platform.ready(function(){
    initialize();
  });
  function initialize(){
    console.log("spawning Map...");
    var promise=LocationService.getPosition();
    promise.then(function(map){
      $scope.map=map;
    });
  }
})

Sweet, so far so good. Now, lets use a service (factory) to handle the fetching of this data. I use $q to defer data and handle my asynchronous responses:

.factory('LocationService', function($cordovaGeolocation,$q){
  var deferred= $q.defer();
  var posOptions = {timeout: 10000, enableHighAccuracy: false};
  $cordovaGeolocation.getCurrentPosition(posOptions)
.then(function(pos){
  myLatlng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
  var mapOptions = {
    center: myLatlng,
    zoom: 16,
  };
  var map=new google.maps.Map(document.getElementById("map"),mapOptions);
  deferred.resolve(map);
}, function(err){
  deffered.reject(err);
});

  return {
getPosition: function(){
  return deferred.promise;
}
  };
})

I would think at this point, everything should be a solid. From various console.log statements I can tell that I am:

  1. Getting my coordinates successfully
  2. A map object is is being created by Google API

Issue here, When I look back on my page, I just see a gray box with what should be showing a map, le sigh.

Further debugging…if I bypass using getCurrentLocation, a map is rendered and displaying because, well, it is no longer an asynchronous request. Please help…Im at whits end with this one. (also, please ignore the variable naming convention…I’ve tried about a dozen different ways to express the same thing)

2

So…Not sure why, but this is working when I add ng-init=“initialize()” to my map div:

<div ng-controller="MapCtrl" id="map" ng-init="initialize()">
</div>

I also had to comment out my initialize() call when ionic ready event handled:

ionic.Platform.ready(function(){
    //initialize();
});

Now, this is fine by me…however I would like to know why this works but my previous solution doesn’t. I know its gotta be something foundational to AngularJS…but I just wanna learn to be better!