Question

I have the JS scope mixed up. I am trying to assign to values to coordinates and use them later, but for some reason i always get the coordinates as null.

   var thing = (function($){
  var obj = function(config) {
    $.extend(obj.config, config);
    obj.init();
  };
  $.extend(obj, {
      coordinates: {},
         browser_geolocation: function() {
             if (navigator.geolocation) {
                  var timeoutVal = 10 * 1000 * 1000;
                  navigator.geolocation.getCurrentPosition(
                  obj.browser_coordinates, //set coordinates
                    maps.browser_error,
                    { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
                  );
                }
                else {
                  alert("Geolocation is not supported by this browser");
                }
         },

         browser_coordinates: function(position) {
             obj.coordinates.long = position.coords.longitude;
             obj.coordinates.lat = position.coords.latitude;
         },
    });



 $(function() {
        maps.browser_geolocation();
            maps.browser_geolocation();

        console.log(obj.coordinates);
  });
  return obj;
}(jQuery));

I cant seem to figure out what I am doing wrong?

Answer 1

You have two main problems here:

1. navigator.geolocation.getCurrentPosition is asynchronous.
2. Undefined (or not included in your example) variables.

You might want to look into prototypal inheritance in JavaScript, its not as hard as it looks.

Here is an example of how you could create a customizable object that utilizes callbacks:

function GetCoordinates(callback) {

    var successCallback = function (position) {
        this.coordinates = position.coords;
        callback();
    };

    var errorCallback = function (error) {
        throw error;
    };

    var self = this;
    if (navigator.geolocation) {
        var timeoutVal = 10 * 1000 * 1000;
        navigator.geolocation.getCurrentPosition(function () {
            successCallback.apply(self, arguments)
        }, errorCallback, {
            enableHighAccuracy: true,
            timeout: timeoutVal,
            maximumAge: 0
        });
    }

}


(function() {

    // callback to execute once coordinates are ready
    var myCallback = function() {
        console.log(c.coordinates); // Coordinates
    };

    // create object (don't forget new :))
    var c = new GetCoordinates(myCallback);

    // because geolocation.getCurrentPosition is async, the following will be undefined
    console.log(typeof c.coordinates);

}());