Maps are always a nice thing to have on a site, especially if you are a business that relies on customers finding you; businesses like restaurants, car repair shop, or clothing store. Google has a great map API that has found it’s way into everything from mobile applications to your local news. It really is a great product. This particular helper will dynamically generate an image of your location to be placed on your site. The final result will look like the following. Again, this example uses the static API, so there is no dragging functionality or JavaScript involved.

Final result of the GoogleMaps Html Helper

Before you use this html helper, I suggest you read the documentation of the Google Maps API. This will give you an understanding of what properties are available and how you can customize your map.

Using the Helper

You will need to get an API key from Google or else you won’t be able to make requests. The minimum requirements for a request are a key, center, and sensor. Below you will see the code used to generate the image seen above. Don’t forget to replace “your_key” with your actual key.

Note: if you do local development, generate a Google API key using http://localhost so that you can streamline local development.

  <%= Html.GoogleMap(new
                              {
                                  key = "your_key",
                                  zoom = 14,
                                  size = "400x400",
                                  center = "Capitol Complex East Wing, Harrisburg, PA",
                                  sensor = "false",
                                  markers = "color:blue|label:H|Capitol Complex East Wing, Harrisburg, PA"
                              }
                            )%>

Now here is the code to spit out the image tag necessary to display your new map.

    public static class GoogleExtensions
    {
        public static string GoogleMap(this HtmlHelper htmlHelper, IDictionary<string,object> mapValues, IDictionary<string,object> attributes )
        {
            var builder = new TagBuilder("img");
            var source = new StringBuilder();
            var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
            const string template = "{0}={1}&";

            source.Append("http://maps.google.com/maps/api/staticmap?");

            // Create the Url
            foreach (var key in mapValues.Keys)
                source.AppendFormat(template, key, urlHelper.Encode(mapValues[key].ToString()));

            // remove the last ampersand
            var finalSource = source.ToString().Remove(source.Length - 1, 1);

            builder.Attributes["src"] = finalSource;
            builder.MergeAttributes(attributes);

            return builder.ToString(TagRenderMode.SelfClosing);
        }

        public static string GoogleMap(this HtmlHelper htmlHelper, object values)
        {
            return GoogleMap(htmlHelper, values, null);
        }

        public static string GoogleMap(this HtmlHelper htmlHelper, object values, object attributes)
        {
            return GoogleMap(htmlHelper, values.TurnObjectIntoDictionary(), attributes.TurnObjectIntoDictionary());
        }

        public static IDictionary<string, object> TurnObjectIntoDictionary(this object data) {
           var attr = BindingFlags.Public | BindingFlags.Instance;
           var dict = new Dictionary<string, object>();

           if (data == null)
               return dict;

            foreach (var property in data.GetType().GetProperties(attr).Where(property => property.CanRead))
                dict.Add(property.Name, property.GetValue(data, null));

           return dict;
       }
    }

There you have it. Now when you want to display a quick map on your site, this helper will make it a breeze.