I need to show the google map based on the address of a contact in my asp.net (MVC) c# application.
I have a list of contacts in my application. When the user views a particular contact, i need to show the google map of the contact's address, to the side of contact view page.
How can i implement this functionality using jquery in MVC?
First thing you'll probably want to do is get the latitude and longitude of the contact's address. You can either access the geoCode api and do that real time or get it and save it in the database when you first create the new contact. I highly recommend the later and you'll save a bunch on headaches if you don't need to do a geoCode look up for every page request.
Then attach your latitude and longitude to the ViewModel so you can work with those values in your view. Set the latitude and longitude to a couple of javascript variables and you're good to go.
Take a look at the "hello world" for google maps api and you should have all the info you need there. Just set the options to what you want and use your latitude and longitude.
There's not much you can do with jQuery here since you'll mainly be using Google's api. The only real advantage would be to maybe put things in the $(funcion() {... so you don't have to do a function on the body onload=...
Maybe MVCMaps could be useful to you. It can used for both the Bing Maps and Google Maps.
Visit http://mvcmaps.codeplex.com/.
You could use the jQuery Google Maps plugin for this, however it doesn't have support yet for converting an address to a location as it requires the latitude and longitude up front.
I wrote a small HtmlHelper for Google maps with MVC that should be able to help you.
Check it out: http://www.deanhume.com/Home/BlogPost/mvc-google-maps-htmlhelper---dynamic-maps/20 All you need to do is call it like so,
<= Html.DrawMap("your_api_key_goes_here","/Home/GetMarkers","550", "400")>