驯夫少夫人咬咬:MVC Google Maps HtmlHelper - Dynamic Maps

Tweet

I've recently been looking for a MVC helper class for Google maps. I came across thiswell written MVC HtmlHelper for static Google maps. Unfortunately I waslooking 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 andpossibly even images.

So, a great way to re-use code in MVC 2 is the Htmlhelper class. I have also written about this beforewhere I wrote a Google Charts Htmlhelper. For this example however, Ialso needed to take advantage of the great way that MVC combines withJavscript 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:

        ///

        /// The helper.

        /// The key.

        /// The json URL.

        /// Width of the map.

        /// Height of the map.

        /// The html of the map.

        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("");

            // Hidden value

            mapHtml.Append("

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

            mapHtml.Append(jsonUrl);

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

            // Map Div

            mapHtml.Append("

            // Maps javascript file

            mapHtml.Append("");

            return mapHtml.ToString();

        }

  <%= 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 needto call to get the data (The name of the method that we wrote in thecontroller).Finally the third and fourth parameters are the width andheight respectively.

This is how the map will look.

I have created a sample project that you can download, but youwill 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 theproject that you might want to switch to.