Get GPS data from API and then display Google map - problem: empty map!

@DavidLoevy wrote:

I have Ionic app for displaying GPS location which is loaded from database (through API). Problem is that view with google map wants to be render earlier than in controller gets values about GPS location (Latitude/Longitude) from API ($http.get is probably not complete/finished in this time yet).

My view has code:

<ion-view ng-controller="UserLocationMapCtrl" style="" title="my position">
  <ion-content class="has-header" overflow-scroll="true" padding="false">
      <div id="map" lat="{{ Latitude }}" lng="{{ Longitude }}" zoom="{{ Zoom }}" map=""></div>
  </ion-content>
...

My controller has code:

.controller('UserLocationMapCtrl',['$scope','$http','BaseURL','$localStorage',function($scope,$http,BaseURL,$localStorage) {
  var OnUserComplete=function(response) {
    $scope.UserPos=response.data;
  }
  $BuddyID=$localStorage.get('BuddyName');
  $TempURL='/API/UG/'+$BuddyID;
  $http.get(BaseURL.concat($TempURL))
    .then(function(response) {
      $scope.UserPos=response.data;
      $scope.Latitude=$scope.UserPos.UserPos[0].Lat;
      $scope.Longitude=$scope.UserPos.UserPos[0].Lng;
    });
  $scope.Zoom=16;
  $scope.UserLocation={};
...
}])

and my "directives.js" has code:

angular.module('app.directives',[])
.directive('map', function() {
  return {
    restrict: 'AE',
    link: function (scope,element,attrs) {
      var zValue = scope.$eval(attrs.zoom);
      var lat = scope.$eval(attrs.lat);
      var lng = scope.$eval(attrs.lng);
      var myLatlng = new google.maps.LatLng(lat,lng),
      mapOptions = {
          zoom: zValue,
          center: myLatlng
        },
      /* create and display map (with set of attributes): */
      map = new google.maps.Map(element[0],mapOptions);
      /* display marker in center of map: */
      marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          draggable:true
        });
   ...
    }
  };
})

But it seems, that view with google map wants to be render (in view) earlier than in controller has values from API ($http.get is probably not complete/finished in this time yet).
Therefore it displays view, but instead of map centered on particular GPS Lat/Lng position I have empty map.

On other side if I hardcode Lat/Lng values in controller in this way:

...
$scope.Latitude=48.70937820070758;
  $scope.Longitude=21.260397017196624;
$scope.Zoom=16;
  $scope.UserLocation={};
...
}])

everything running OK (map is rendered and centered with this right GPS position).
Problem is in directive? Something related to DOM? Or promise?
Pls could you help me ... how to use this google map (in view) with GPS position values loaded from API?

Posts: 9

Participants: 2

Read full topic