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);
Incorporating this into a Html helper was pretty easy:
/// Draws the map.
/// <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
// Hidden value
mapHtml.Append("<input type=\"hidden\" ");
// Map Div
mapHtml.Append("<div id=\"map\" style=\"width: ");
mapHtml.Append("px; height: ");
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.
Add your comment