Geolocation with angular-google-maps

ionic-v1
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.

1 Like
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);
1 Like
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:

2 Likes
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: