JQuery - refresh a marker position (to get movement)

Question

I have a GPS based system that sends to a MYSQL database the coordinates.

Using this code:

(function() {
    window.onload = function() {

        // Creating a new map
        var map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(41.65, -0.88),
          zoom: 1,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        function createPoints(json){
        var infoWindow = new google.maps.InfoWindow();

        // Looping through the JSON data
        for (var i = 0, length = json.locations.length; i < length; i++) {

                var data = json.locations[i],
                latLng = new google.maps.LatLng(data.lat, data.long);

            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: data.nome,
                icon: iconBase + 'schools_maps.png'
                });


            (function(marker, data) {

                // Attaching a click event to the current marker
                google.maps.event.addListener(marker, "click", function(e) {
                    infoWindow.setContent(data.nome);
                    infoWindow.open(map, marker);
                });


            })(marker, data);
                         /* moveMarker( map, marker ); */

         }

        }


        // Get  the JSON data from PHP script

var json ;

$.getJSON("http://mywebservice/nmea_last.php").done(function(data) {
   json = data;
    createPoints(json);
});

    }

})();

Uding getJSON("http://mywebservice/nmea_last.php") sentence, I get the last coordinates that gps sends (pediodically) to the mysql, and marker appears correctly. My question is, how could I get the dinamically refresh of the marker to catch the movement on map?

I think I need to use setTimeout method (or not?) but I do not know how. Any help? Thanks in advance.

score 2 · Answer 1 · answered May 13 '13 at 16:15

2

You can use ajax pulling to get the coordinates every N milliseconds:

var N = 1000; //every 1 second
var timeout = function() { 
  setTimeout(function()
  {
    $.getJSON("http://mywebservice/nmea_last.php").done(function(data) {
      json = data;
      createPoints(json);

      timeout(); //run again    
    }); 
  }, N); 
}

timeout();

answered May 13 '13 at 16:15

Kirill Ivlev

12,310
5
27
31

Thanks! it seems work. The TheAccordance 's solution works too. There is any advantage using the ajax with respect to setInterval? – doxsi May 13 '13 at 17:10
@doxsi There's a fundamental flow in the setInterval approach. Imagine your ajax requests takes a bit longer than 5 seconds. And before it's done another ajax is sent... so you've got two ajax requests at the same time. In the setTimeout approach you send a new ajax request only when the current ajax request is finished – Kirill Ivlev May 14 '13 at 05:04

score 1 · Answer 2 · answered May 13 '13 at 16:15

Try changing the getJSON call to this:

setTimeout( function() {
    $.getJSON("http://mywebservice/nmea_last.php").done(function(data) {
        json = data;
        createPoints(json);
    });
}, 5000);

The 5000 indicates a 5 second delay, you can adjust that according to the time you wish for the screen to refresh.

score 1 · Accepted Answer · answered May 13 '13 at 16:25

1

I suggest looking at the setInterval function, which you can use to call a function on regular intervals. Information can be found here.

I believe you would want to wrap your getJSON call within the setInterval function to pull the new points and refresh the map. This would be an example that would fire the getJSON call every 5 seconds:

setInterval(function() {
  $.getJSON("http://mywebservice/nmea_last.php").done(function(data) {
     json = data;
     createPoints(json);
  });
}, 5000);

answered May 13 '13 at 16:25

theaccordance

889
5
13

Thanks a lot! It seems work properly... Only one thing more: How cold I remove the previouse marker? (actualy it persist on the map) – doxsi May 13 '13 at 17:07
I can't think of a specific solution myself, but this may lead you in the right direction: http://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers – theaccordance May 13 '13 at 18:44

JQuery - refresh a marker position (to get movement)

3 Answers3