How to create GoogleMap marker auto update?

Question

I'm working on mvc project which include Google map inside

My system allow user to send tweet to system and keep it in database then will show tweet on the map

what i need to do is "Auto update marker on the map when system get the new data"

any suggestion? thank you very much ^^

Answer 1

You need a script on the server that given a timestamp will check if new records have been inserted in the database after that timestamp. If yes, the script should return a response with the new information.

Then you should initiate an AJAX request to the server-side script, using either normal or long polling, with the timestamp parameter of the last update.

When your AJAX request receives new information from the server, you should simply add the new markers to the map. Then initiate a new AJAX request with the updated timestamp paramater.

Pseudo-example using jQuery:

var lastUpdate = ''; // You need to decide what the server should return
                     //  when you load the map the first time.

function autoUpdate() {
  $.ajax({
    type: "GET",
    url: "check_updates.aspx?last_update=" + lastUpdate,
    dataType: 'json',
    success: function(jsonData) {

      // 1. Check if jsonData is empty. If empty skip to 4.
      //    Else we received some fresh data.
      //
      // 2. Update lastUpdate from the jsonData with the timestamp from 
      //    the server. Don't use JavaScript to update the timestamp, 
      //    because the time on the client and on the server will 
      //    never be exactly in sync.
      //
      // 3. Add new markers on Google Map.
      //    
      // 4. Relaunch the autoUpdate() function in 5 seconds.
      setTimeout(autoUpdate, 5000);
    }
  });
}