Cordova, $geolocation and geocoding in Ionic

cordova
1

I am pretty new to Cordova in general and never dealt with this stuff before, so I need some help and pointing out.

I need to use geolocation so the app can detect where I am and propagate the result to a textbox, so the user doesn’t have to write his address hims self. Also show on the map in the later process (where the user is)
This will need to be done using both geolocation and geocoding, does cordova provide geocoding, or I need to take some other approach?

Can I have some successful code examples, tips, suggestions and pitfalls when dealing with this services/APIs/Cordova/what ever they call them self.

Ask more if I lack something in the description!

1 Like
2

Hi,

Cordova Geolocation Plugin provide only geolocation, not Geocoding for this you can use Google map API or Leaflet (Openstreetmap).

3

But I can use both is that correct? Cordova Geolocation and Google Map Api? Unless it’s not recommended and should just use all of the Google Maps Apis that come with it?

4

Plugin give you Longitude and Lattitude and Map geocoding of this geolocation.

5

@jimibi Hey, if you’ve got any experience with the $cordovaGeolocation plugin would you be able to have a quick look at this Geolocation Watch Position throwing error

Cheers in advance.

6

How do I display the marker of my current location? On Success I want to get the position and make the marker that will show were the position is on the google map

function success(position){
            vm.marker = {
                id: 0,
                coords: {
                    latitude: position.coords.longitude,
                    longitude:  position.coords.latitude
                },

What is an issue with doing this? For the coords do I need a actual number? Or there is some other trick to get it to work

7

This my code for creating a marker with my current position @RuRu

      if(window.cordova) {
        var currentPosMarker;

        var posOptions = {timeout: 10000, enableHighAccuracy: false};
        $cordovaGeolocation
        .getCurrentPosition(posOptions)
        .then(function(position) {
          var lat         = position.coords.latitude,
          long            = position.coords.longitude,
          initialLocation = new google.maps.LatLng(lat, long);

          map.setCenter(initialLocation);

          currentPosMarker = new google.maps.Marker({
            position: initialLocation,
            animation: google.maps.Animation.DROP,
            optimized: false,
            icon: 'img/icon-anchor.gif',
            map: map
          });

I’m using ngCordova and the $cordovaGeolocation plugin.

8

@cameronbourke What do you use for google map? I am going with Angular Google map, are you using the same? I will try and see how your implementation fits in with angular google map, should be more or less the same. Thanks!

9

This is my solution

var geoSettings = {
        frequency: 1000,
        timeout: 3000,
        enableHighAccuracy: false // may cause errors if true
    };

    navigator.geolocation.getCurrentPosition(success, error, geoSettings);

    function success(position) {
        return vm.marker = {
            id: 0,
            coords: {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            },
            options: {draggable: false},
            events: {
                dragend: function (marker) {
                    $log.log('marker dragend');
                    var lat = marker.getPosition().lat();
                    var lon = marker.getPosition().lng();
                    $log.log(lat);
                    $log.log(lon);

                    vm.marker.options = {
                        draggable: true,
                        labelContent: "lat: " + vm.marker.coords.latitude + ' ' + 'lon: ' + vm.marker.coords.longitude,
                        labelAnchor: "100 0",
                        labelClass: "marker-labels"
                    };
                }
            }
        };
    }

  <ui-gmap-google-map draggable="true" center='vm.map.center' zoom='vm.map.zoom'>
        <ui-gmap-marker idkey="vm.marker.id" coords="vm.marker.coords" options="vm.marker.options" events="vm.marker.events">
        </ui-gmap-marker>
    </ui-gmap-google-map>

If there is a better way, let me know :smiley:

10

Shame the code isn’t shown with syntax color, finding it hard to read. Am I the only one?

11

Need help with ngCordova, I am trying to get the position and reverse geocode to a string that can be displayed in the view. But nothing happens when I test it on my android device. If I do it without ngCordova and go for a google maps api options, then it works in the browser but not on the phone.

What I am doing wrong?

 function HomeCtrl($ionicPlatform, $cordovaGeolocation, myDriveApi) {
    var vm = this;

    $ionicPlatform.ready(function(){
        alert('device is ready');
        vm.myLocation = "";
        var geocoder = new google.maps.Geocoder();

        var geoSettings = {
            frequency: 1000,
            timeout: 30000,
            enableHighAccuracy: true // may cause errors if true
        };

        
        $cordovaGeolocation.getCurrentPosition(getPos, error, geoSettings);
        function getPos(position) {
            var LatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            console.log(LatLng);
            return showLocation(LatLng)
        }

        function error(error) {
            alert('code: ' + error.code + '\n' +
            'message: ' + error.message + '\n');
        }

        function showLocation(LatLng){
            geocoder.geocode({'latLng': LatLng}, function(results, status){
                if(status == google.maps.GeocoderStatus.OK){
                    vm.myLocation = results[0].formatted_address;
                    console.log(results);
                }
            })
        }

    });
12

but this does n’t work on android and it is working fine on IOS

13

For anyone who is having the same problem, change
var geocoder = new google.maps.Geocoder();
to
var geocoder = new google.maps.Geocoder;