GPS Tracking with Google Maps & AJAX
“Real-Time” tracking of GPS locations on a web site is actually quite hard to achieve. In order to see a dot moving around on an online map, the page would need to be constantly refreshing itself. The refresh would initiate a request back to the server where server-side code would grab the new coordinates of the GPS unit out of a database, redraw the map with a dot on it, and send the whole image back to the user’s browser. Whether the refreshing is caused by the page itself or a hidden iframe on the page somewhere, a full roundtrip to the server every few seconds would soon become super annoying, even if it did mean the user got to see a neat dot ‘seemingly’ moving around on a map.
So how do we get around this? Ideally, we would just want to redraw the ‘dot’, not the whole map and definitely not the whole page. Can this be done? Yes! How? Using AJAX.
No, AJAX isn’t a cleaning product. And believe it or not it isn’t even a new technology. AJAX stands for “Asynchronous JavaScript and XML” and is described by WikiPedia as:
A term describing a web development technique for creating interactive web applications using a combination of:
*HTML (or XHTML) and CSS for presenting information *The Document Object Model manipulated through JavaScript to dynamically display and interact with the information presented *The XMLHttpRequest object to exchange data asynchronously with the web server. (XML is commonly used, although any text format will work, including preformatted HTML, plain text, and JSON)
AJAX essentially allows calls to be made to the server without the user ‘noticing’. The call itself does not cause the page to refresh at all. The developer can make the page do whatever they wish with the response from the server. Most often developers will manipulate the page’s appearance using JavaScript, the DOM and CSS.
So how can AJAX be applied to online mapping? Well, using AJAX we can make ‘asynchronous’ calls to some server-side logic that can grab the newest position of the GPS unit out of a database. The coordinates can then be passed back to our page in an XML string. Client-side JavaScript in our page will interpret the XML and create a ‘img’ element that looks like a dot, using CSS to place it at the correct pixel location on the map.
Since I don’t have a real GPS unit to test this with, I have populated a database table with some fake GPS coordinates. To date I’ve tried this using MapInfo’s MapXtreme 2004 (ASP.NET in C#, plenty of JavaScript, CSS and a horrible little Access DB) which worked a treat. I’ve also tried it using a Google Map which you can see below. (If the dot has stopped moving, refresh the page using Ctrl+F5 – I only have about 10 points in my fake GPS unit db table.)
If anyone wants to see my code, please see this article.
20 comments
Leave a Reply
Hi! I'm Annie Luxton, a Software Engineer with a real passion for technology and travel, currently living in Amsterdam.
Welcome to my blog :)
My Instagr.am Gallery
Kindly post me the code, Its real cool application
Please send me your code, thanks.
Could you please send me the code too. Thanks in advance.
Please send me your code, thanks
Cool Application, Can you send the demo code
Thanks in advance
Alok
Interested in your concept and seeing more. We are a tracking company and have the GPS data in real time.
Can you send me this code? Its very important for me.Thanks
Thanks
Seems interesting! Could you kindly send me your code?
Can you send me your code please? Looks good!
Hi mate, i’d love to see the code, i’ve been trying to come up with a way to do this for ages!
it’s possible to see the javascript,HTML/CSS code?
i’d really need it….
thanks a lot for the cool stuff! :)
Please send me the code
Hi, please send me the code to refresh the map with the moving point position
thanks
you can do this for 1 vehicle but if you want to do it for say 5 or 10 vehicles simultaniously then how you can do any idea
Please, i want to see your map code…
I m very excited to view the code. plz send me. thanx
hi is there any chance in seeing your code? im very interested in this. and do you know if there is a way to track other users at the same time?
Hi Ben,
The code can be viewed at http://www.codefrenzy.net/2008/03/15/code-for-gps-tracking-with-google-maps-ajax/.
As for being able to track other users at the same time, yes I’m sure it’s do-able. You’d just read them out of your data source and plot them as you do with a single set of points.
Hi, I read your article and check your code, I would like to see the program running. I am currently working on a similar project, I would like you to help me a little more. I can show you my code. please send me an email. Thank you.