Pages

Hacking Google maps AJAX API to use in C#.Net

Hi,
As you know “Google Maps API” is available only for AJAX developers. Using it in C#.net is not possible. One of the great things about Google maps API is it gives you turn by turn direction almost anywhere on earth. I wanted to exploit this feature of turn by turn navigation on my mobile, that too offline, because when i go to remote places its highly probable that i will not be having connectivity on my phone. Or connectivity will be so poor that using maps is highly impractical.

So I have created a pair of application.
1. A Desktop app to retrieve turn by turn navigation data + static images.
2. A Mobile app to read this data and to give me turn by turn navigation on phone (offline).

Certainly this is something not allowed in TOU of Google, so i cannot release this app commercially.

How to Mix AJAX and C#.net??
1. I created a web page (html+JavaScript), which dumps the direction info data in DOM.
2.In C#.Net Form, I kept a web-browser control, which loads this page.
3.When page is loaded, using webBrowser1.Document.GetElementById stuff I extracted the direction info.
4.Then I downloaded Static Images using "Google Static Maps API", & hacked to get the latitude and longitude positions on the static images. see code for detail.


How I exported data on mobile??
1. Serialized whole object in an XML file, including direction info and static images.
2. De-serialized on mobile to get that data back.


Source Code
http://code.google.com/p/pocketnavigator/


Screen-shot Of Mobile Version.



Demo of Desktop App (6 minute).

Thanks, Feel free to ask question, & share on twitter + digg & blah blah.

12 comments:

  1. Good information. It was interesting to read. Thanks.

    ReplyDelete
  2. I like the idea of the application. I think that you need to recreate this app for the iPhone or for Android. If you do I imagine you will get a lot of downloads as there are no good offline maps applications

    ReplyDelete
  3. Oh, what a wonderful article. Author, thank you!

    ReplyDelete
  4. Note :

    On Desktop
    Now, run desktop version and enter the directions and go thru buttons step1 and step2
    Once the direction-info is extracted, you can export this in an xml file by clicking "export direction info button"


    ON Mobile
    Mobile version only runs on mobile with GPS.
    install it and paste the exported xml in the same directory where you have kept your executable.
    now run the it and go to direction you will be able to see a xml for selection. and then select it.

    ReplyDelete
  5. Hi Markandey,

    Your work is amazing!
    I am wondering that how can you play the sound notification for navigation?

    do you mind to send your answer to my email?
    franva008@hotmail.com

    cheers
    Winston

    ReplyDelete
  6. Hi Markandey,

    Your work is amazing!
    I am wondering that how can you play the sound notification for navigation?

    do you mind to send your answer to my email?
    franva008@hotmail.com

    cheers
    Winston

    ReplyDelete
  7. Hi Mark,

    Your application looks great. I would like to have a feel of it. I downloaded the source files from Google code but they do not seem to be working :-(
    Can you please send me a demo of how exactly it works @ sunit.parab@gmail.com.

    Cheers,
    Sunit

    ReplyDelete
  8. Hi Markandey,

    Firstly thank you for replying. I have tried to compile and run your application but it does not display any map to me in the browser and hence consequently does not display any information on the image file either. My best analysis is that, it is not able to fire this javascript function setDirections in your DirectionTest.html file and hence it is not able to get the co-ordinates required to generate the map. Otherwise the project compiles very well without any errors.

    Would you be able to put any insight into this?

    Kind regards,
    Sunit

    ReplyDelete
  9. Could you please post the executables.

    ReplyDelete
  10. hello, i am not getting the source code.. :(

    ReplyDelete
  11. hello, I want to add my choose image. how can I add.

    ReplyDelete
  12. Rashed !
    CAn you explain what exactly you are looking for?

    ReplyDelete

Your comment will inspire me, Please leave your comment