CODEWITHSUNDEEP
androidangularjscordovageolocation
Ramon
Ramon

Reputation: 410

How to add a marker in an Ionic App with the Cordova Geolocation plugin

I have a problem with this code. I can see the Google Maps correctly, with my actual location in the center of the android screen, but I cannot see the marker whatever I do.

This is the html:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <style>
        html, body {
            height:100%;
        }
    </style>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter" ng-controller="GeoCtrl" class="platform-android">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

This is the services.js

angular.module('starter.services', [])

.factory('Location', ['$q', function($q) {
    return {
        getLocation: function(options) {
            var q = $q.defer();
            navigator.geolocation.getCurrentPosition(function(position) {
                q.resolve(position);
            }, function(err) {
                q.reject(err);
            });
            return q.promise;
        }
    }
}]);

And this is the app.js:

angular.module('starter', ['ionic', 'starter.services'])
.run(function($ionicPlatform) {
...
})
.controller('GeoCtrl', function($scope, Location) {
  $scope.lat;
  $scope.long;
  $scope.map;
  $scope.marker;
  Location.getLocation().then(function (position) {
    $scope.lat  = position.coords.latitude;
    $scope.long = position.coords.longitude;
    var mapOptions = {
        center: new google.maps.LatLng($scope.lat, $scope.long),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    $scope.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }, function(err) {
        // error
    });
    $scope.marker = new google.maps.Marker({
        position: new google.maps.LatLng($scope.lat, $scope.long),
        map: $scope.map,
        title: 'Holas!'
    }, function(err) {
        console.err(err);
    });
});

Thank you!

Upvotes: 1

Views: 2728

Answers (1)

Ramon
Ramon

Reputation: 410

I hope this can help to somebody:

I called the marker outside the then flow, whereas it has to be called inside:

  Location.getLocation().then(function (position) {
    $scope.lat  = position.coords.latitude;
    $scope.long = position.coords.longitude;
    var mapOptions = {
        center: new google.maps.LatLng($scope.lat, $scope.long),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    $scope.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    $scope.marker = new google.maps.Marker({
        position: new google.maps.LatLng($scope.lat, $scope.long),
        map: $scope.map,
        title: 'Holas!'
    }, function(err) {
        console.err(err);
    });
    }, function(err) {
        // error
    });

Now it works.

Upvotes: 2

Related Questions