Updating Marker Position for Location Tracking with PhoneGap and googlemaps plugin

2.4k Views Asked by At

I am trying to rework a phonegap app to use googlemaps plugin and v2 of google maps API.

I am struggling with updating the marker position, which seems to work perfectly in v3, but not with the plugin.

The issue seems to be when calling setMarkerPosition(), the marker object is not being passed to it so I am getting "cannot call method setPosition of undefined"

I have currentPositionMarker set as a global variable at the top of my script and although I define it in setCurrentPosition() at the start, I have also tried using the callback to define it again, but neither work.

Apologies if its something silly, this is my first JavaScript project so still very patchy understanding of parts of the language, so any pointers greatly appreciated.

Code I am trying...

function initializeMap()
                {    map = plugin.google.maps.Map.getMap();
                    // map = new plugin.google.maps.Map(document.getElementById('map_canvas'), {
                    //   zoom: 13,

                    // });
                }

    function initLocationProcedure() {
                    initializeMap();
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(
                            displayAndWatch,
                            errorCallback_highAccuracy,
                            {maximumAge:600000, timeout:5000, enableHighAccuracy: true});
                    } else {
                        alert("Your Phone does not support Geolocation");
                    }
                }

    function displayAndWatch(position) {
                    // set current position
                    setCurrentPosition(position);
                    // watch position
                    watchCurrentPosition();
                }

     function errorCallback_highAccuracy(position) {
      }           

    function watchCurrentPosition() {
                    var positionTimer = navigator.geolocation.watchPosition(
                        function (position) { setMarkerPosition(currentPositionMarker,position);
                        }, error, {maximumAge:600000, timeout:5000, enableHighAccuracy: true});
                }
    function error(){
                    }    

    function setMarkerPosition(marker, position) {
           marker.setPosition(
                        new plugin.google.maps.LatLng(
                            position.coords.latitude,
                            position.coords.longitude)

                    );
       }

    function setCurrentPosition(pos) {
    currentPositionMarker = map.addMarker({
      'position': new plugin.google.maps.LatLng(
                            pos.coords.latitude,
                            pos.coords.longitude
                        ),

                }, function(marker) {
        currentPositionMarker = marker;
                });
                    map.setCenter(new plugin.google.maps.LatLng(
                                                    pos.coords.latitude,
                                                    pos.coords.longitude
                                                ));
                }
1

There are 1 best solutions below

0
On BEST ANSWER

OK, turns out the marker var is being created, but not in time as setCurrentPosition(), which is setting the marker is being called asynchronously with setMarkerPosition(). Removing displayAndWatch() altogether and then calling setMarkerPosition() from the callback of setCurrentPosition() seems to be the fix.

function setCurrentPosition(pos) {
                    map.addMarker({
  'position': new plugin.google.maps.LatLng(
                        pos.coords.latitude,
                        pos.coords.longitude
                    ),

            }, function(marker) {
                        currentPositionMarker = marker;
                        watchCurrentPosition();
            });
                map.setCenter(new plugin.google.maps.LatLng(
                                                pos.coords.latitude,
                                                pos.coords.longitude
                                            ));


            }