MVC Google Maps HtmlHelper - Dynamic Maps

 http://deanhume.com/Home/BlogPost/mvc-google-maps-htmlhelper---dynamic-maps/20

I've recently been looking for a MVC helper class for Google maps. I came across this well written MVC HtmlHelper for static Google maps. Unfortunately I was looking for a helper that was for the dynamic version of Google charts. I needed to be able to add markers on the maps with dynamic text and possibly even images.

So, a great way to re-use code in MVC 2 is the Htmlhelper class. I have also written about this before where I wrote a Google Charts Htmlhelper. For this example however, I also needed to take advantage of the great way that MVC combines with Javscript to return JSON data.

First, I wrote a method that would return my JSON data to the client side.

        public ActionResult GetMarkers()

        {

            // This would normally be our call to the Db,

            //else we could populate this

            // with some data as Ive done here.

            MarkerList markers = GetMarkersObjects();

           

            return Json(markers, JsonRequestBehavior.AllowGet);

        }

 

I wrote a small Javascript file that will handle the JSON and pass it on to Google and draw the map.

Incorporating this into a Html helper was pretty easy:

        /// <summary>

        /// Draws the map.

        /// </summary>

        /// <param name="helper">The helper.</param>

        /// <param name="key">The key.</param>

        /// <param name="jsonUrl">The json URL.</param>

        /// <param name="mapWidth">Width of the map.</param>

        /// <param name="mapHeight">Height of the map.</param>

        /// <returns>The html of the map.</returns>

        public static string DrawMap(this HtmlHelper helper, string key, string jsonUrl,string mapWidth, string mapHeight)

        {

            StringBuilder mapHtml = new StringBuilder();

 

            // Google Maps API Link

            mapHtml.Append("<script src=\"http://maps.google.com/maps");

            mapHtml.Append("?file=api&amp;v=2&amp;sensor=false&amp;key=");

            mapHtml.Append(key);

            mapHtml.Append("\" type=\"text/javascript\"></script>");

 

            // Hidden value

            mapHtml.Append("<input type=\"hidden\" ");

            mapHtml.Append("id=\"MarkerUrl\" value=\"");

            mapHtml.Append(jsonUrl);

            mapHtml.Append("\" />");

 

            // Map Div

            mapHtml.Append("<div id=\"map\" style=\"width: ");

            mapHtml.Append(mapWidth);

            mapHtml.Append("px; height: ");

            mapHtml.Append(mapHeight);

            mapHtml.Append("px\"></div>");

 

            // Maps javascript file

            mapHtml.Append("<script type=\"text/javascript\" ");

            mapHtml.Append("src=\"/Content/GoogleMapping.js\"></script>");

 

            return mapHtml.ToString();

        }

 

 

 

 

Now when you call the Html you simply need to do the following in your page:

  @Html.DrawMap("your_api_key_goes_here","/Home/GetMarkers","550", "400")

The first parameter is the API key that you need when accessing Google maps, it's free and easy to sign up for one, just go to http://code.google.com/apis/maps/signup.html. The second parameter is the location of the JSON service that we need to call to get the data (The name of the method that we wrote in the controller).Finally the third and fourth parameters are the width and height respectively.

This is how the map will look.

I have created a sample project that you can download, but you will need to get an API key in order for the map to display correctly. There is also a minified version of the Javascript included in the project that you might want to switch to.