map showing wrong user location

[Fattouh92]

I am trying to show the user current location and I am initializing map object and updating on getting user location using MDN geolocation but the map shows the wrong location which it was initialized to. I noticed that:

• when you have to go through the dialogue of getting location which happens after rendering the map it never works and trying to navigate the map quickly shows the rights coords in the text shown benath the map but after navigation is finished it shows the location navigated to
• when the browser knows to use my location it works and shows my current location

[nmccready]

Example please.

[Fattouh92]

it is working now after adding control and refreshing on location obttained from geolocation
map.center are set to these values
$scope.map.control.refresh({latitude: $scope.map.center.latitude, longitude: $scope.map.center.longitude});
but is it supposed to work like this not just changing longitude and latitude
here are the files
html:

<div id="map_canvas" ng-controller="GetLocationController as vm">
  <ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control">
    <ui-gmap-marker coords="marker.coords" options="marker.options" idkey="marker.id" events="marker.events"></ui-gmap-marker>
  </ui-gmap-google-map>
</div>

controller:

(function() {

  function GetLocationController($scope, $timeout, Map) {
    var vm = this;
    $scope.map = {
      center: {
        latitude: 0,
        longitude: 0
      },
      control: {},
      zoom: 14
    };

    var markerEvents = {
      dragend: function (marker, eventName, args) {
        var lat = marker.getPosition().lat();
        var lon = marker.getPosition().lng();

        $scope.marker.options = {
          draggable: true,
          labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude,
          labelAnchor: "100 0",
          labelClass: "marker-labels"
        };

        Map.setCoords($scope.marker.coords);
      }
    }

    $scope.marker = {
      id: 0,
      coords: {
        latitude: 0,
        longitude: 0
      },
      options: { draggable: true },
      events: markerEvents
    };

    getLocation();

    function getLocationSuccFn(position) {
      $scope.map.center.latitude = position.coords.latitude;
      $scope.map.center.longitude = position.coords.longitude;
      $scope.marker.coords.latitude = position.coords.latitude;
      $scope.marker.coords.longitude = position.coords.longitude;
      $scope.map.control.refresh({latitude: $scope.map.center.latitude, longitude: $scope.map.center.longitude});
      Map.setCoords($scope.marker.coords);
    }

    function getLocationErrFn(error) {
      console.log("fail");
      switch(error.code) {
        case error.PERMISSION_DENIED:
          console.log("User denied the request for Geolocation.");
          break;
        case error.POSITION_UNAVAILABLE:
          console.log("Location information is unavailable.");
          break;
        case error.TIMEOUT:
          console.log("The request to get user location timed out.");
          break;
        case error.UNKNOWN_ERROR:
          console.log("An unknown error occurred.");
          break;
      }
    }

    function getLocation() {
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getLocationSuccFn, getLocationErrFn, {timeout: 10000});
      }
    }

  }

  angular.module('dirtypawsApp')
    .controller('GetLocationController', GetLocationController);
})();

service:

function Map() {
  var map = {
    setCoords: setCoords,
    coords: {
      latitude: 0,
      longitude: 0
    }
  };
  return map;

  function setCoords(coords) {
    map.coords = coords;
  }
}

angular.module('dirtypawsApp')
  .service('Map', Map);

[nmccready]

This needs to be a plnkr , jsbin or something where I can tinker with this easily.

[Fattouh92]

here you go: http://plnkr.co/edit/411xKQ?p=info
try to remove control.refresh from controller and observe behavior when you are granting location permission, it will not update the map after getting user location and sometimes even when browser has permission it does not update

[nmccready]

I updated fine for me after refreshing the page. If it is a timing issue due to asking for permission then you should make the completion async via callback or promise.

[nmccready]

sorry about that github went bonkers