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

ionic-v1
1

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?

2

@DavidLoevy

Try using ng-if on the map div only if you have a location.

<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="" 
           ng-if="Latitude && Longitude"></div>
  </ion-content>
...

RGecy

3

Another option is to set the Latitude and Longitude to some common location as default, then once the location is loaded from the API, set the new values and change the map center etc.

RGecy

4

It seems that I have not got this values … and if I use:

    <div ng-if="Latitude">
      <div id="map" lat="{{ Latitude }}" lng="{{ Longitude }}" zoom="{{ Zoom }}" map></div>
     </div>

map (nor empty map) is not displayed at all.

5

It is not pretty good solution for me, because I have this values in database and I would want to display it. But not “some common location”.

6

@DavidLoevy echo out your response.data from inside the api call (before you asign it to latitude and longitude) to the console or an alert to see whats coming back. Can you post the response data for us to see?

  $http.get(BaseURL.concat($TempURL))  
    .then(function(response) {
      alert(response.data);
      $scope.UserPos=response.data;
      $scope.Latitude=$scope.UserPos.UserPos[0].Lat;
      $scope.Longitude=$scope.UserPos.UserPos[0].Lng;
    });
1 Like
7

no data (yet):
image

8

… but these data are loaded finally:
image

9

@DavidLoevy Sorry forgot to stringify the object.

Use
alert(JSON.stringify(response.data));
or
console.log(JSON.stringify(response.data));

And you can copy and paste the results.

1 Like
10

yes, object contains these data (Lat/Lng) … but I dont know why map is empty:

image
20160920-001a.JPG838Ă—387 38.2 KB

image
20160920-003b.JPG840Ă—402 49.6 KB

… and code for controller is:

image
20160920-002a.JPG1064Ă—297 44.9 KB

11

@DavidLoevy
Try defining $scope.Latitude = “”; and $scope.Longitude = “”; at the beginning of you controller and put the ng-if=“Longitude” on the map div, not the div around it.

1 Like
12

hi rgecy, it seems that it is working. Great! Very thanks.

13

@DavidLoevy Awesome! Glad you got it working.