Geolocation with angular-google-maps


#1

Hello,

Is there way to get the maps center (or move to new LatLong), after getting the geolocation.

Thanks
Gaurav


#2

Hey Gaurav, I’d suggest you take a look at the Ionic Google Maps Example: http://codepen.io/ionic/pen/uzngt.


#3

Hello Tim,

Thanks for this example. I have looked in this example. Let me give you some idea, what I am expecting. Actually the example works good, as it shows but when we use this using then the map did not work and tiles are properly loaded.

Although I was able to worked it with also, but it then did not work on emulator. I have many threads ongoing discussion on this forum while implementing maps.

Atlast then I switch to using angular-google-maps directive, which have this feature that works well with ng-view. So, now I want that how geolocation will work with this directive. Also, Places API which I am working on integrating in this directive.

Thanks
Gaurav


#4

Have u got this to work?

If so can u help?

I’m using angular google map directive and i need to geolocation also.
10X!


#5

Hello @doronsever,

Let me give you an idea how I am using geo-location with google map directive. I have added a $scope.map for initializing the angular map. Then it check the geo-location and on success and error I have respective functions.

   $scope.map = {
	center: {
		latitude: 45, 
		longitude: -73
	},
	zoom: 15,
   };
   var onSuccess = function(position) {
    $scope.map.center = {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
    };
    $scope.$apply();
}
function onError(error) {
    console.log('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);

#6

gaurav,

Your code worked like a charm for me. Thanks!


#7

Thank you very much man!
But i think i found a better way. For me at least.

I’ve put the Geolocation in a resolve in the sataeProvider

Here’s a code that demonstrate the stateProvider:

.state('tab.nearest-garden', {
      url: '/main/nearest-garden',
      views: {
          'main-tab': {
              templateUrl: 'templates/nearest-garden.html',
              controller: 'NearestGardenCtrl',
              resolve: {
                  currentLocation: function($q) {
                      var q = $q.defer();
                      navigator.geolocation.getCurrentPosition(function(pos) {
                          console.log('Position=')
                          console.log(pos);
                          latLong =  { 'lat' : pos.coords.latitude, 'long' : pos.coords.longitude }
                          q.resolve(latLong);

                      }, function(error) {
                          console.log('Got error!');
                          console.log(error);
                          latLong = null

                          q.reject('Failed to Get Lat Long')

                      });
                      return q.promise;
                  }
              }
          }
      }
  })

That way i get the user’s lat/long before i initialize the map

Hope it helps someone :smile:


#8

Without adding Cordova Geolocation plugin, how are you adding access the current position? Please you share you ideas.

Thank you,
Praveen


#9

You should use the cordova geolocation or else you will only get location based on IP and it’s not accurate at all. You might get faulty results.


#10

How do you get the currentLocation in your controller, then ?


#11
  var posOptions = {timeout: 10000, enableHighAccuracy: false};
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      var lat  = position.coords.latitude
      var long = position.coords.longitude
    }, function(err) {
      // error
    });

#12

I mean: from doronsever’s solution (getting the location in a ‘resolve’, in the state provider).
Not sure your answer is linked to that (but I might be wrong).

Edit: Found ! I just need to inject the resolved object (here, currentLocation) in my controller:

angular.module('myModule')
.controller('MyController', ['currentPosition', function(currentPosition){
   console.log(currentPosition);
}]);

#13

Things have changes since Cordova 4.0 is released, read more about it here: