Google Maps with ASP.NET MVC

ASP.Net MVC

Once again i am back to my blog. In these days i was working on my project, which i developed using ASP.NET MVC. In that project i was in need of using google maps, for which i tried some of the things and i was able to use it. So i want to share that part with you. In this post i will be telling about “how to use the Google maps with ASP.net MVC”. It is a very simple application in which we will just put the marks(push pin) on the map and will send them back to controller to save them. Later on those can be again used to show it back in the Maps.

Google Map

First we will start with creating a new MVC project. To get the mark form the user we have to show him a map(google). To show him the map we are going to use the javascript function and for that we have to include the javascript api file given by google. http://www.google.com/jsapi?key=%5BYou Key]. You have to get this key from the google so that you can access the map api. http://code.google.com/apis/maps/signup.html

After creating a new project open the index.aspx page in the view section of the project. There in the source view add the following code to get the map

with following lines we are adding the API file


<asp:Content ID"indexHead" ContentPlaceHolderID="HeadContent" runat="server">

<script type="text/javascript" src="http://www.google.com/jsapi?key=[YourKey]"></script>

Following is the code to load the google map in the webpage. You can get the same code from google documentation also with more extra functions and features. But what extra we are doing here is, we are adding all the points in the array so that we can send it back to the controller.


<script type="text/javascript">
var allMarks = [];
google.load("maps", "2");

//This function will help us to add the mark at
//location where user has double clicked. Then
//we will add all the marks in our array so that
//we can send it back to the controller
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
GEvent.addListener(map, "dblclick", function(overlay, latlng) {
if (latlng) {
var mark = new GMarker(latlng);
allMarks.push(latlng);
map.addOverlay(mark);
}
});

}
google.setOnLoadCallback(initialize);

Following function is used for sending the data to the controller. It is ajax call with the data as the array and the description. We will be calling the controller with action name. Here we are creating a object GMap containing the data


//This function will be called for saving the mark
//for that it will send the data back to the controller
function saveMap() {

//gmap object with all values of the map mark
var gmap = {
Locations: allMarks,
Description: Description.value
}

//Ajax call for saving the data at the server. It will send the gmap
//object tot the server
            $.ajax({
type: "POST",
url: "/Home/Create",
data: gmap
});
}
</script>

</asp:Content>

That is it. After doing all this we have to write one create function in the HomeController.cs class. Have a look to the following code


public ActionResult Create(GMap gmap)
{
Session["MapData"] = gmap;
return View();
}

As you can see here we have used a GMap type. That type you can create as following


public class GMap
{
public object[] Locations { get; set; }
public string Description { get; set; }
}

Finally we are done with it. Now you can see the following screenshots to get an idea how it is working. Also you can download the sample from here

Google Map in ASP.NET MVC application

Action getting data from the webpage

About these ads
2 comments
  1. mike said:

    maybe a silly question but how do you get your code in those boxes ?
    without hosting your own wp instance ?
    much obliged, gracias

    mike

  2. ashut said:

    hi,
    i’m working on mvc web app i need a gmap for my own location how can I modify it and api key is also not working for me i have generated it :(

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: