Tuesday, February 14, 2012

Simulating moving targets in Google Maps

Recently i made a project in which I had to simulate real targets/GPS Clients moving gently in Google Maps. I want to share the logic for people who want similar codes.

DEMO: http://hobbycoders.com/demos/gpssimulation

Google API provides a method of directly rendering the entire path between a source and destination. But if you want the same thing to be done but simulating a moving target in the same path, a bit of code has to be written. So here is the logic:

1. Google API can give the path coordinates (Latitude, Longitude) in JSON or XML. An example of JSON direction lookup from Srirangam to Trichy (They both are places in India), google direct URI which gives direct JSON output will look like:
http://maps.googleapis.com/maps/api/directions/json?origin=srirangam&destination=trichy&sensor=false

2. Now from AJAX get the output of file and make a Javascript object from it easily (thats why JSON used). I was facing problem of cross domain ajax referencing with this, so i created a Java code in my domain which can proxy the web page for me in same domain

3. Once done, for each step of direction (like first turn left, then turn left etc.,), you get a variable called points in converted Javascript object from JSON. To extract it use:
jsonObject.routes[index].legs[index].steps[index].polyline.points

4. If you notice, the points data will be encoded. Decode it, google has already given the code to decode it

5. And now for each step in direction, you will get many coordinates of latitude-longitude pair

6. Create a Polyline (Google Map object) for each pair of lat-long (if you need the entire trail of path) or a Marker (only current position)

7. Call some delay function in javascript like setInterval will be a good choice, iterate through the coordinates slowly and render polylines. This will give a feeling that some target is actually moving on map

8. Use a loop and do the same for many targets, so that many GPS targets will be on your Google Map (Multithreading experience)

Code Demo: http://hobbycoders.com/demos/gpssimulation   (view the source code of the demo)

If you face any problem with the logic/code i shared or if you need any code helps with this please email me or leave a comment here. If you have an alternate method also, please share.

100 comments:

  1. I would like to generate random coordinates to simulate movement on a map. The problem i have is moving forward. backward, left and right based on coordinates since i do not want to use an already generated set of coordinates. Can you give me your thoughts on this and can it be done?

    ReplyDelete
  2. I have to show moving truck or car on Google map from one position to another position. Kindly provide me an your code on my email ID (amita.sharma28@gmail.com) or any other idea you have.
    Thanks in advance.

    ReplyDelete
    Replies
    1. Hi Amita,

      I have the same problem to solve, I mean I have to show a moving vehicle on map.

      Kindly provide me your code on my gmail id sabah.irfan@gmail.com

      Thanks

      Delete
    2. facing same kind of problem kindly send me code. my email id is m.talhaalam@gmail.com

      Delete
    3. Hi Amita,

      I have the same problem to solve ,kindly provide me your code on my gmail id sabah.irfan@gmail.com

      Thanks

      Delete
    4. Hi Amita, Sabah, Talha, Kennedy, and Sriram .A.S

      i have also the same problem of moving train on railway station's line, the problem includes how to move a train according to its time table from start to stop

      Kindly, send me its code if u please on my gmail ID : "proofesser@gmail.com".

      it's already will be appreciated

      Thanks

      Delete
    5. please send me a code of moving vehical between source and destination..pls reply on deepakkarma@gmail.com

      Delete
    6. i have the same problem and I also want to show moving possition as well please send me the solution on this main id zmuhammad672@gmail.com

      Delete
  3. I working my collage project ,os please provide your code
    on my mail id "vishnusaradhara@gmail.com".
    Thanks in advance

    ReplyDelete
    Replies
    1. Hi Saradhara,

      i'm also going to implement this problem in my graduation project, help me if you please

      Thanks

      Delete
  4. sir,
    Can u provide me your code on my email id:"simapl01@gmail.com". I need it for my final year project.Thank you

    ReplyDelete
  5. Hello sir,
    Can u provide your codeon my mail id:"simapl01@gmail.com" .I needed for my final year project.Thanking you.

    ReplyDelete
  6. can u provide me the total code ..my mail id is arunavkda@gmail.com

    ReplyDelete
  7. Sir i need source code of this project my email: jawadahmed34@gmail.com

    ReplyDelete
  8. Hi guys, please visit: http://hobbycoders.com/demos/gpssimulation/ and view source of that page. You will get the source code that you want.

    ReplyDelete
    Replies
    1. Hi dear Sriram,

      this link doesn't give the source code

      try its code if u please, i am facing a graduation project problem in my faculty

      Delete
    2. Hi Srirram. Deserve appreciation for your work. I needed source code for the same in ios using objective C. Kindly share it to navyateja_g@yahoo.com. Thanks in advance

      Delete
  9. Can you teach us the same concept being applied to android google maps v2? I have gps coordinates want to do the same like yours.

    ReplyDelete
  10. Very good Blog..
    Please can you email me the code delorscris@yahoo.fr

    Cristelle
    Thank you

    ReplyDelete
  11. Excellent example.
    Could you please send me your code as I am working on a similar project.

    chrispavlides1327@gmail.com

    Thank you in advance,
    Chris

    ReplyDelete
  12. Hi,

    I like a lot your example. I am trying to do the same but I am having some problems. Can you please provide me your code? My email is beagadea@gmail.com

    Thanks in advance,

    Beatriz

    ReplyDelete
  13. Hi Beatriz,

    You can view source on the demo page and get the code. Dont forget to download mock_route.json file at: http://hobbycoders.com/demos/gpssimulation/mock_route.json

    If you see the code, the getPath() function is supposed to get the path between two locations. But as I mentioned in the code, I have mocked the path using mock_route.json

    Please check the comments in the code.

    ReplyDelete
    Replies
    1. Dear,

      i can't see the getPath() function, only i am able to see your GPS simulation with out any code for it, but i saw mock_route.json

      i think mock_route.json is insufficient

      sorry, for annoying you

      Thanks

      Delete
  14. I have to show moving truck or car on Google map from one position to another position. Kindly provide me an your code on my email ID (kumar.kesubhukta@gmail.com) or any other idea you have.
    Thanks in advance.

    ReplyDelete
  15. will u please provide me whole code..
    my email address is ashu_w20001@yahoo.com

    ReplyDelete
  16. Hi, can you please provide me with your code. Kgao707@gmail.com

    ReplyDelete
  17. This works in an android application? If its works..can you send me your code to my email (abraxas19@gmail.com)?

    Thanks !!

    ReplyDelete
  18. Problem with IE8+
    Can you pls check your code.

    "Message: 'undefined' is null or not an object
    Line: ##
    Char: ##
    Code: 0
    URI: http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/13/15/main.js"

    ReplyDelete
  19. Hi Sriram, I am trying to draw the polyline in loop with some delay using Thread.sleep(500), But the polyline is visible only after end.

    ReplyDelete
  20. I have to show moving truck or car on Google map from one position to another position. Kindly provide me an your code on my email ID nagaraj845@gmail.com

    ReplyDelete
  21. I have to show moving Vehicle on Google map from one position to another position. Kindly provide me an your code on my email ID (srinivas.pjava@gmail.com) or any other idea you have.
    Thanks in advance.

    ReplyDelete
  22. I have to show moving car on Google map from one position to another position. Kindly provide me an your code on my email ID sanasaleh786@gmail.com..Thanks in advance

    ReplyDelete
  23. I have to show moving truck or car on Google map from one position to another position. Kindly provide me an your code on my email ID sanasaleh786@gmail.com

    ReplyDelete
  24. Hi, I would like to show a moving Vehicle on Google map. Can I have your code as a reference? My email is chinjianji@gmail.com.. Thanks in advance.

    ReplyDelete
  25. Very nice blog.Could you please send me your code as I am working on a similar project.

    sasisolai@gmail.com

    Thank you in advance,
    Sasi

    ReplyDelete
  26. can u please send your source code on my email id
    amreshsingh13500@gmail.com..
    pls...thanking you in advance..

    ReplyDelete
  27. I m beginners on google map API ,I have assignment to use gooogle map API and show moving locator as parameter get changed.

    please provide me some basic idea or code
    at
    kapil.dev8624@gmail.com

    thanks in advance and i must share my code if get success.

    ReplyDelete
  28. Halo.
    I want to simulate direction google maps for demo my apps.

    can you share your code to me now? If i get succes, I'll share my code to you.
    Thanks. Send the code to sdwihuripto@gmail.com
    I wish you response soon.
    Thanks a lot !

    ReplyDelete
  29. I have to show moving truck or car on Google map from one position to another position. Kindly provide me an your code on my email ID (kumarsuneel933@gmail.com) or any other idea you have.
    Thanks in advance.

    ReplyDelete
  30. I m beginners on google map API ,I have assignment to use gooogle map API and show moving locator as parameter get changed.

    please provide me some basic idea or code
    at
    kumarsuneel933@gmail.com

    thanks in advance and i must share my code if get success.

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. Finally i developed Simulating moving targets in Google Maps. but now i want to develop following in sequence--
    1)Draw route direction on map.
    2)then move target along the same route map
    3)Also show option like avoid tolls, travel mode.
    Its challenging........

    ReplyDelete
  34. HI myself sharath GPS simulation is awesome. In my project i have 2 apps one for customer and another for driver. After driver confirms his arrival, customer wants to view the driver's arrival simulation on the google map please help in this. Please share your code email me : narayan.sharu@gmail.com

    ReplyDelete
  35. can u plz mail me mock_route.json file so that i can check the format of json file
    my email id hassan.mudasir664@gmail.com

    ReplyDelete
  36. This is the mock_route.json file: http://hobbycoders.com/demos/gpssimulation/mock_route.json

    As I mentioned, its the mock of this: http://maps.googleapis.com/maps/api/directions/json?origin=srirangam&destination=trichy&sensor=false
    as cross domain ajax was not allowed. Now in HTML5 there are many ways through which you can do this. Or else you can write a server side code to do the same and expose the json.

    ReplyDelete
  37. thank u for replying but my issue is that i have move the car along given lat longs for which i have create json every time. I dont have any idea bout html 5 controls can u plz provide little details .

    ReplyDelete
  38. In my code, I first fetch the json of the route from source A to destination B from google directions and extract the "polyline" node from each route. I decrypt the value (polyline is encrypted) and then obtain the latitude-longitudes from it and draw a line from previous position to the obtained coordinates after which I add some delay to simulate a person moving.

    ReplyDelete
  39. Are there any html 5 controls which can help me take the json file from url . t wl be very thankful


    ReplyDelete
  40. You can google "html5 cross domain ajax".

    ReplyDelete
  41. I am trying to draw polyline on the basis of (Lat,Lang) and want to move an image through the polyline on Google map using Jquery. When I am using " google.maps.SymbolPath.CIRCLE" then it is working fine. But unable to move an image through polyline.
    It would be great if anyone can me .
    If we can use pin instead of image then also fine but should move along with Polyline.

    Thanks in advance,

    Dhrubajyoti Ghosh

    ReplyDelete
  42. Hello , i am facing a tough situation in showing a moving marker on a google map as the database gets updated. Can you please help me and also provide me with your code.

    My email is dilrangaw@yahoo.com

    Thanks & Regards
    Dilranga

    ReplyDelete
  43. Hello,
    I am an undergraduate who is working on , tracking a vehicle using google maps. I get a database updated from a GPS device.

    What i want to do is to show realtime tracking via a moving marker on google maps , using the latest values stored in the database.

    Can you please be kind enough to help me. And can you email me your code as well

    email : dilrangaw@yahoo.com

    Your kind and favorable consideration is much appreciated.

    Thanks & Regards
    Kushan

    ReplyDelete
  44. Hello Kushan,
    i am working in the same type of the project in which you are working can you share me the solution if are able to complete the code for real time tracking

    email: parmargaurav069@gmail.com

    Your kind and favorable consideration is much appreciated.

    Thanks & Regards
    Gaurav

    ReplyDelete
  45. Greetings Kushan,

    I am currently a student working on a bus management system with bus tracking for our capstone project. Part of our system requires to track down the movement of a bus from one location to another. In line with this, I humbly ask for your help by sending me the code you have made in my email, kristoferangeloliwanag@rocketmail.com. Rest assured that you will be cited as the creator of the code.

    Hoping for you favourable response and kind consideration regarding the matter. Thank you and God Bless

    Sincerely,
    Kris

    ReplyDelete
  46. Hey can u plz share ur code with me on my mail id jainsachin2395@gmail.com

    ReplyDelete
  47. any one who can help me in my final project on google map plzz contact me on my mail id bsc1st@gmail plzzz i badly need help

    ReplyDelete
  48. Nice job! I'm also interested in your code, can you please send me to pieterbreda76@gmail.com? Thanks in advance!!!

    ReplyDelete
  49. Hi sriram,
    Nice post. Can you please share your code with me on gsunitha21@gmail.com.

    Thanks in advance :)

    ReplyDelete
  50. Hi,
    Well done, I working on a taxi sharing route simulation, could you please do me a favor provide your code on my mail "B.Li@tue.nl". Thank you in advance!

    ReplyDelete
  51. Hey, Can you please share the code with me on ruchika.cse@gmail.com

    ReplyDelete
  52. Good job. Can I get your code?, please, info@trackalia.com

    ReplyDelete
  53. Please, Can you please share the code with me on
    andre@two-s.com.br

    ReplyDelete
  54. Very nice!.Could you please send me your code, at muriane@free.fr ?
    Thank's in advance!

    ReplyDelete
  55. Can you please share the code with me
    mrtasln.ma@gmail.com

    ReplyDelete
  56. its not working ..............i've copy pasted this to notepad++ and tried to run in wamp...............bt it shows only the map and start simulation button.............the marker is not moving............

    ReplyDelete
  57. Please send me the copy of the code via my email asanalila02@gmail.com.

    Thank you,

    ReplyDelete
  58. Very Good Example. Kindly send me a copy of the code via my email asanalila02@gmail.com

    Thank you,

    ReplyDelete
  59. plz share ur code with me. my email id is discover.mudasir@gmail.com

    ReplyDelete
  60. Hello.
    I ask you to please give me the code for this article.
    I would be really grateful.
    Email:
    ehernandez@testingsoft.com

    ReplyDelete
  61. Hi, can you please send the code to athirahramzi@gmail.com. Very much appreciated thank you.

    ReplyDelete
  62. Hi, can you please send the code for moving car using google map api to samgd6141@gmail.com.
    Thankyou,

    ReplyDelete
  63. Hello
    i have to simulate car between two points using Google API.
    can u help me and please send the code to tarunagarwal1947@gmail.com

    ReplyDelete
  64. Hello i have to simulate car between to points using Google API
    can u help me and send the code to tarunagarwal1947@gmail.com

    ReplyDelete
  65. Hi, I have read your example and I understand the logic but I have some problems in coding, can you please send the code to danovici03@gmail.com Thank you very much, appreciate.

    ReplyDelete
  66. Hi all, you can actually view the source code of the demo and that is the complete source code.

    ReplyDelete
  67. For this to work, I need json data of the path between two places, for that you can query to google maps and get the data. In my case, I copied the json response from google to mock_json file and copied this file to my server and I query that. Be careful when you try to ajax into cross-domains, it will not work. You have to write a server script which can proxy this data for your domain.

    ReplyDelete
  68. hai,
    I am student. I reqiure a javascript code for moving markers from one location to another using location data stored in excel on google map can you kindly help

    ReplyDelete
  69. Hi, can you please send the code for moving car using google map api to aurelianod@gmail.com. Thanks.

    ReplyDelete
  70. I have the same problem to solve, I mean I have to show a moving vehicle on map.

    Kindly provide me your code on my mail id is ravi@anvesna.com

    ReplyDelete
  71. Hi,
    can you please send your complete code

    sandeepkumar2459@gmail.com

    ReplyDelete
  72. Hi,

    Could you please send me your code @ noorulrazvi@gmail.com

    Thanks,
    Razvi

    ReplyDelete
  73. Hi,

    Even I am facing the same problem..could you please provide me your code?

    Thanks,
    Razvi

    ReplyDelete
  74. hi, can you please send the code to jeyam.arun18@gmail.com Thank you very much

    ReplyDelete
  75. have you any idea to do in android same project kindly share your view. :)

    ReplyDelete
  76. hi...I like your project...actually i m also doing same project but having some problem at showing moving marker will you help me. so please will yo send me your code on my email(pandityogita66@gmail.com) as early..
    Thanks in advance

    ReplyDelete
  77. D Satyanarayana RajuJanuary 6, 2016 at 11:26 PM

    Dear Sir,

    I want Vehicle live tracking code when it moving. Kindly send me to my email id

    dantuluri.satyanarayanaraju@gmail.com

    ReplyDelete
  78. hello, I'd be very glad if U'd send the source code...
    woocheemane@gmail.com
    Thank You

    ReplyDelete
  79. Hello,

    I am in a project where i have to simulate moving cars on a map. Could you send me the source code? It would be really userful.

    max95_nl@live.nl

    Thank you,
    Max

    ReplyDelete
  80. Please share source code I need for moving car innovation on Google map darshan1978@gmail.com

    ReplyDelete
  81. hello, can u share ur code with me (sundern990@gmail.com). i need it for my university assignment, thank you.

    ReplyDelete
  82. I am unable to get this link http://hobbycoders.com/demos/gpssimulation

    The link is not opening.

    Can you please send me the code file or any other link

    We are waiting for your reply

    My email id is soudip.roy@webskitters.com

    ReplyDelete
  83. Hi... Sir can you send me your code. My gmail ID is sunstarearthsky@gmail.com or abduljalilmatora@gmail.com

    ReplyDelete
  84. Please share the code its urgent ! My E-mail vignesh.m91@gmail.com

    ReplyDelete
  85. http://hobbycoders.com/demos/gpssimulation theres nothing here now

    ReplyDelete
  86. Hi, I'm currently facing a similar Problem. Can you provide a new link to your code as I'm really interested. kind regards

    ReplyDelete