Geo Location - Using Ionic Framework, AngularJS and Google API

Question

We are trying to using this Codepen within our latest Ionic Framework/AngularJS project and can't seem to figure this issue out.

We want to be able to click 'Find Us' and have the Google Map Marker display our current location.

If anyone can see where we're going wrong please let us know. Thank you.

// Google Map
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
  function initialise() {   
    var myLatlng = new google.maps.LatLng(53.068165,-4.076803);
    var mapOptions = {
        zoom: 15, 
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
      }
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
    });
    $scope.map = map;    
  }
  google.maps.event.addDomListener(window, 'load', initialise);
  $scope.centerOnMe = function() {
    if(!$scope.map) {
      return;
    }
    $scope.loading = $ionicLoading.show({
      showBackdrop: true
    });
    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);
    });
  };
 });

Solution 1

Here's a good example of this.

Codepen link

.controller('MarkerRemoveCtrl', function($scope, $ionicLoading) {

  $scope.positions = [{
    lat: 43.07493,
    lng: -89.381388
  }];

  $scope.$on('mapInitialized', function(event, map) {
    $scope.map = map;
  });

  $scope.centerOnMe= function(){

    $ionicLoading.show({
      template: 'Loading...'
    });


    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      $scope.positions.push({lat: pos.k,lng: pos.B});
      console.log(pos);
      $scope.map.setCenter(pos);
      $ionicLoading.hide();
    });

  };

});

I did use a directive for google maps, just to keep everything in angular-land.

Solution 2

Here is a CodePen of an Ionic app with Google Maps

---

angular.module('ionic.example', ['ionic'])

    .controller('MapCtrl', function($scope, $ionicLoading, $compile) {
      function initialize() {
        var myLatlng = new google.maps.LatLng(43.07493,-89.381388);

        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: 'Uluru (Ayers Rock)'
        });

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

        $scope.map = map;
      }
      google.maps.event.addDomListener(window, 'load', 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')
      };

    });

Comments

[geocodezip]

Please post the relevant code in the question itself, not just a link to an external resource.

[Mati Tucci]

@geocodezip In the CodePen you have all the app working, but I have edit my answer and you can see the MapCtrl

[Medet Tleukabiluly]

Why navigator.geolocation.getCurrentPosition doesn't work in android emulator?

[EmptyData]

@evc Did you find any solution for android?

[Medet Tleukabiluly]

@EmptyData It works, don't use cordova plugin, but only ask for geolocation permissions, then android will give browser native geolocation service

[EmptyData]

@evc How to ask for permission in hybrid app?

[Medet Tleukabiluly]

You need 1 plugin at least, lets say camera, install it by cordova add plugin [name]. It will be installed in plugins folder, open android.json and add permissions after the camera permission

[Siddharth Pandey]

Can you tell me how to add permission in my ionic app