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=[You 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
But in these days i went through various new technologies. Now i will posting on that. First i will post on .NET RIA Service and further on WCF. If anything specific leave a comment for me.
Recent Comments