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);
    });
  };
 });

enter image description here

The javascript/HTML you posted works for me (shows a marker). The issue must be in the framework. — geocodezip
– geocodezip, Commented Sep 19, 2014 at 14:47

mhartington · Accepted Answer · 2014-10-20 15:29:44Z

10

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.

answered Oct 20, 2014 at 15:29

mhartington

7,0255 gold badges43 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Medet Tleukabiluly Over a year ago

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

EmptyData Over a year ago

@evc Did you find any solution for android?

Medet Tleukabiluly Over a year ago

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

EmptyData Over a year ago

@evc How to ask for permission in hybrid app?

Medet Tleukabiluly Over a year ago

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

|

Mati Tucci · Accepted Answer · 2014-09-19 17:01:38Z

3

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')
      };

    });

edited Sep 19, 2014 at 17:01

answered Sep 19, 2014 at 15:01

Mati Tucci

2,9766 gold badges31 silver badges43 bronze badges

2 Comments

geocodezip Over a year ago

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

Mati Tucci Over a year ago

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

gattamaneni venkatanarasimham · Accepted Answer · 2015-12-16 13:09:11Z

when you find the current location of your phone first you find out the latitude and longitude.So First,Add the plugin your project 
1.cordova plugin add cordova-plugin-geolocation

2.module.controller('GeoCtrl', function($cordovaGeolocation,$http) {

  var posOptions = {timeout: 10000, enableHighAccuracy: false};
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      var lat  = position.coords.latitude //here you get latitude
      var long = position.coords.longitude //here you get the longitude
  $http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true').then(function(data){      $rootScope.CurrentLocation=data.data.results[0].formatted_address;//you get the current location here


        }, function(err) {
          // error
        });
    }, function(err) {
      // error
    });

}):

Collectives™ on Stack Overflow

Geo Location - Using Ionic Framework, AngularJS and Google API

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related