location in Ionic project for android

Question

In a simple Ionic app I have to get current location on map. It's works fine in browser when i click find me, but it's not working on actual Android device.

I'm using the following code

View.html

            <ion-view view-title="{{navTitle}}">
             <ion-content>
                    <div id="map" data-tap-disabled="true"></div>
            </ion-content>
             <ion-footer-bar class="bar-stable">
                <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
             </ion-footer-bar>
            </ion-view>

controllers.js

        .controller('googlemap', function($scope, $ionicLoading, $compile) {
               $scope.navTitle = 'Google Map';
              $scope.$on('$ionicView.afterEnter', function(){
            if ( angular.isDefined( $scope.map ) ) {
                google.maps.event.trigger($scope.map, 'resize');
            }
          });

          function initialize() {
                //var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
                var myLatlng = new google.maps.LatLng(18.520430300000000000,73.856743699999920000);
                var mapOptions = {
                  center: myLatlng,
                  zoom: 16,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map"),
                    mapOptions);

                //Marker + infowindow + angularjs compiled ng-click
                var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
                var compiled = $compile(contentString)($scope);

                var infowindow = new google.maps.InfoWindow({
                  content: compiled[0]
                });

                var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title: 'Pune(India)'
                });

                google.maps.event.addListener(marker, 'click', function() {
                  infowindow.open(map,marker);
                });

                $scope.map = map;
              }
              initialize();

              $scope.centerOnMe = function() {
                if(!$scope.map) {
                  return;
                }

                $scope.loading = $ionicLoading.show({
                  content: 'Getting current location...',
                  showBackdrop: false
                });

                navigator.geolocation.getCurrentPosition(function(pos) {
                  $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                  $scope.loading.hide();
                }, function(error) {
                  alert('Unable to get location: ' + error.message);
                });
              };

              $scope.clickTest = function() {
                alert('Example of infowindow with ng-click')
              };

        })

Also in my device on the device Location but still I have problem.I got following output on my screen for long time.

Solution

Isn't it easier to just use the ngCordova $cordovaGeoLocationPlugin ? You can get the position from this plugin ( latitude and longitude) and then pass this in GoogleAPI. I think it will be lot easier that way.

ngCordova geoLocationPlugin

Just a suggestion.

Comments

[Dun0523]

Thanks, for the solutions!

[Vahid Alimohamadi]

I used this plugin, it works well on the browser, but it doesn't capture location from internal GPS in smart phone device. Why?