How to get lat and lon coordinates dynamically?

Question

JavaScript

All the best!
There is an application showing the current location on the map (according to the coordinates received from the JSON API).
It performs this function in general.
But there is an idea to add points of interest to the map. In fact, it has also already been implemented, but there is a problem, at the moment, lat and lon must be entered by yourself.
Here is the code that is responsible for getting these very data on lat and lon:

app.factory('places', ['$http', function($http) {

    return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + 43.1056 + '%7C' + 131.8735 + '&gslimit=30&format=json&callback=JSON_CALLBACK')
        .success(function(data) {
            return data
        })
        .error(function(err) {
            return err
        })

}])

And I would like to receive these coordinates dynamically from some third-party JSON API, say ip-api.com/json
There was an idea to do this

app.factory('places', ['$http', '$scope', function($http, $scope) {

  $scope.coordinates = {};
  $http.get('http://ip-api.com/json')
    .success(function(data) {
      $scope.coordinates.lat = data.lat;
      $scope.coordinates.lon = data.lon;
    });

    return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + coordinates.lat + '%7C' + coordinates.lon + '&gslimit=30&format=json&callback=JSON_CALLBACK')
        .success(function(data) {
            return data
        })
        .error(function(err) {
            return err
        })

}])

or so

app.factory('places', ['$http', function($http) {

  $http.get('http://ip-api.com/json')
    .success(function(coordinates) {
         return $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + coordinates.lat + '%7C' + coordinates.lon + '&gslimit=30&format=json&callback=JSON_CALLBACK')
        		.success(function(data) {
            		return data
        		})
        		.error(function(err) {
            		return err
        		})
    });

}])

but this way doesn't work. Could you suggest how this can be done?
If you need to see the entire application (all code), you can download the source code from this link https://cloud.mail.ru/public/Jpa6/e82QUcSKY I haven't uploaded it to github yet.

Answer 1

Your second callback fails to receive geolocation data and is most likely launched without coordinates.
try this with a finally block.

app.factory('places', ['$http', '$scope', function($http, $scope) {

  $scope.coordinates = {};
  $http.get('http://ip-api.com/json')
    .success(function(data) {
      $scope.coordinates.lat = data.lat;
      $scope.coordinates.lon = data.lon;
    })
    .finally(function(){

        $http.jsonp('https://en.wikipedia.org/w/api.php?action=query&list=geosearch&gsradius=5000&gscoord=' + coordinates.lat + '%7C' + coordinates.lon + '&gslimit=30&format=json&callback=JSON_CALLBACK')
        .success(function(data) {
            return data
        })
        .error(function(err) {
            return err
        })

    })