Real time Google Map

Question

Hello Google map API experts, What would be the best(good) way to develop a real time dynamic map using Google Map API.

Example: http://whrrl.com/

It would be really helpful if someone points me towards the right direction. Thank you

Answer 1

Best place to start is the Google Maps Javascript API. Here is the documentation.

You will find lots of sample there, but basically with a few lines of javascript you can associate a Google Maps object with an element in the DOM (map_canvas):

var latlng = new google.maps.LatLng(-34.397, 150.644);

var myOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Having a look at what Whrrl is doing specifically. They are updating their map center (and displaying a custom popup) based on a pre-rendered set of users in the their system (If you view the source for their home page, you can see the big chunk of user JSON at the bottom of the file). This javascript fires events on a timer panning the map from one location to the next.

Answer 2

Just to add another example for you to check out, here is the source code for a live map showing the position of trains on the London Underground. The site can be found at http://traintimes.org.uk:81/map/tube/?from=map;to=tube, although unfortunately it is no longer active as Transport for London has suspended their API service due to high demand. Hopefully you might be able to get an idea from the source code though about how to develop a dynamic, real-time map.

Answer 3

I found the easiest solution to this. http://marcgrabanski.com/articles/jquery-google-maps-tutorial-basics

Answer 4

AJAX calls or Comet, to fetch/be notified of new map data coming through.

Take a look at node.js :)