CODEWITHSUNDEEP
jquerygoogle-maps
doxsi
doxsi

Reputation: 1034

JQuery - refresh a marker position (to get movement)

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.

Upvotes: 0

Views: 1828

Answers (3)

theaccordance
theaccordance

Reputation: 889

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);

Upvotes: 1

user1796666
user1796666

Reputation:

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();

Upvotes: 2

cyber_rookie
cyber_rookie

Reputation: 665

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.

Upvotes: 1

Related Questions