Google Maps with 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 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. Key]. You have to get this key from the google so that you can access the map api.

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="[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);
GEvent.addListener(map, "dblclick", function(overlay, latlng) {
if (latlng) {
var mark = new GMarker(latlng);


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
type: "POST",
url: "/Home/Create",
data: gmap


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

  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


  2. ashut said:

    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: Logo

You are commenting using your 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


Get every new post delivered to your Inbox.

%d bloggers like this: