HTML5, geolocation in real time with marker

Question

I have this code:

function startTracking() {

   var trackId = navigator.geolocation.watchPosition(successCallback, null, {maximumAge:1000, timeout:60000, enableHighAccuracy:true});

    function successCallback(position){
        map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));



            var marker = new google.maps.Marker({
                position:  new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                map: map,
                title: 'Posizione Attuale'

            });
            marker.setMap(map);  


    };

}

Now the app create a marker every time that I move. I would like that, on the map, I see only the marker where I'm in that moment, I won't see the marker on the previous position.

Answer 1

Insert a button for refresh and solve the problem..

Answer 2

I don't really know the api but for instance :

function startTracking() {

 //Destroy the marker here

var trackId = navigator.geolocation.watchPosition(successCallback, null, {maximumAge:1000, timeout:60000, enableHighAccuracy:true});

function successCallback(position){
    map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));



        var marker = new google.maps.Marker({
            position:  new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            map: map,
            title: 'Posizione Attuale'

        });
        marker.setMap(map);  


};

}


setInterval(startTracking, 3000);

you may want to put the marker as global