Click here to Skip to main content
13,407,331 members (54,510 online)
Click here to Skip to main content
Add your own
alternative version


25 bookmarked
Posted 30 Aug 2011

Google Static Maps HTML Helper

, 12 Oct 2011
Rate this:
Please Sign up or sign in to vote.
creating an MVC HTML Helper for Google Maps

One of the features that I like the most in ASP.NET MVC is HTML Helpers, I use them all the time, and I also use Google Maps very often, so it's natural to join them and create a simple HTML Helper Extension Method that you can use immediately in your applications.

Google Maps provides an API for generating map images from parametrized URLs called Google Static Maps API, so today we will create an Extension Method to the HtmlHelper class that you can use to easily embed a Google Static Map into any View Page.

We will start with some text from the API docs.

Google Static Maps API Query String Parameters

if markers not present
Defines the center of the map
if markers not present
Zoom levels
between 0 (the lowest zoom level) to 21+ (down to individual buildings)
sizeRequiredDefines the rectangular dimensions of the map image
formatOptionalDefines the format of the resulting image (png8,png,png32,gif,jpg,jpg-baseline)
maptypeOptionalDefines the type of map to construct (roadmap,satellite,terrain,hybrid)
languageOptionalDefines the language to use for display of labels on map tiles
markersOptionalDefine one or more markers to attach to the image at specified locations, more info
pathOptionalDefines a single path of two or more connected points to overlay on the image at specified locations, more info
visibleOptionalSpecifies one or more locations that should remain visible on the map
styleOptionalDefines a custom style to alter the presentation of a specific feature (road, park, etc.) of the map, more info
sensorRequiredSpecifies whether the application requesting the static map is using a sensor to determine the user’s location, more info

Create a new MVC 3 Web application and add the following module into your Models folder.

Google Static Map Extension Method (VB .NET)

Public Module HtmlHelpers

    Function GoogleStaticMap(helper As HtmlHelper,
                             title As String,
                             latitude As Decimal,
                             longitude As Decimal,
                             width As Integer, height As Integer,
                             Optional zoom As Integer = 15,
                             Optional language As String = "en") As MvcHtmlString

        'Google Static Map API - Base URL
        Dim googleApiUrl = ""

        'a string builder for quicker text manipulation
        Dim url = New System.Text.StringBuilder

        'Setup URL with all required query strings

        'Base Url
        url.Insert(0, googleApiUrl)




        'Markers "latitude,longitude"

        'Create an <img src="URL" alr="title" />
        Dim imgTag = New TagBuilder("img")

        imgTag.MergeAttribute("src", url.ToString)
        imgTag.MergeAttribute("style", "border:1px solid black;")
        imgTag.MergeAttribute("alt", title)

        'Return the Encoded HTML
        Return MvcHtmlString.Create(imgTag.ToString(TagRenderMode.SelfClosing))

    End Function

End Module

Explain The Code

Using a string builder, we construct the final parameterized URL, notice that the markers parameter is of format “latitude,longitude”, then a TagBuilder is used to create our IMG tag with the attributes required to show a Google Static Map, as IMG tags are self-closing we select the self-closing TagRenderMode and return the final encoded HTML with MvcHtmlString.Create method.

That’s it, we create the URL, and then create an IMG tag with that URL as source.

How To Use It

In your Views/Home folder, open the Index.vbhtml page and use the following code:

    ViewData("Title") = "Index"
End Code

<h2>Google Static Maps - Example</h2>

@Html.GoogleStaticMap("My First Map", 12.250151, 64.33717, 550, 500)


  • Geocoding feature
  • Show multiple location markers
  • Use map styles to change the appearance of the map
  • Use marker styles to change the appearance of the marker


There are just too many features available in Google Maps API, we talked here about a quick and portable implementation that can quickly and easily fit into any project with a “Contact Us” page that needs a map. I hope that this can help you start your own Advanced Google Maps HTML Helper.

Filed under: .NET Tagged: Google, Helpers, Map, MVC


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) KUFPEC
Kuwait Kuwait
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Jamal Alqabandi5-Sep-11 16:21
memberJamal Alqabandi5-Sep-11 16:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02-2016 | 2.8.180212.1 | Last Updated 12 Oct 2011
Article Copyright 2011 by Buaziz
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid