Custom ASP.NET MVC HTML Helper for Google Map

Screen Shots

How to Use

  1. Download the DLL file and reference it from your ASP.NET MVC Project
  2. Reference it from the razor file
    @using GoogleMapHelpers

Available Functions

  1. Display a Google map with marker on an address
    /* GoogleMap(Address, Width, Height, Zoom) */ @Html.GoogleMap("Seoul, South Korea", 400, 300, 4)
  2. Display a Google map with marker on an address with the desired map type
    /* GoogleMap(Address, Width, Height, Zoom, Google Map Type) */ @Html.GoogleMap("Tokyo, Japan", 400, 300, 4, GoogleMapType.SATELLITE)
  3. Display a Google map with marker on multiple addresses 
    @{ string[] addresses = { "Richmond, VA", "Washington, DC", "Baltimore, MD" }; }
    /*  GoogleMap(Addresses Array, Width, Height) */
    @Html.GoogleMap(addresses , 400, 300)
    
  4. Display a Google map with markers on multiple addresses that are in the desired radius in miles from a specific address 
    @{ string[] addresses = { "Richmond, VA", "Washington, DC", "Baltimore, MD" }; }
    /* SearchByRadius(Address to search, Address arrays to search from, Radius in miles, Width, Height */
    @Html.SearchByRadius("Great Falls, VA", addresses, 25, 400, 300)
    
  5. Displays a google map with markers on multiple addreses that are in the desired radius in miles from the users current location using the Geolocation API. If Geolocation API is not available, the user will be prompted to enter an address
    @{ string[] addresses = { "Richmond, VA", "Washington, DC", "Baltimore, MD" }; }
    /* SearchNearBy(Address arrays to search from, Radius in miles, Width, Height */
    @Html.SearchNearBy(addresses, 25, 400, 300)
    
     

Styling

My goal is to make this extension as much customizable as possible. Here are some of the ways how you can customize.

  1. The map is contained in 
    <div id='map-canvas'> 
  2. TBA

Change Log

07/07/13 - Version 0.3.0.0

  • Click event has been added to SearchNearBy and SearchInRadius method's map markers. Clicking on the map markers will create a infowindow which has distance information and the link to google map direction.

07/04/13 - Version 0.2.1.0

  • SearchNearBy and SearchInRadius methods now correctly label markers without skippping numbers.

07/03/13 - Version 0.2.0.0 

  • GoogleMapByAddress and GoogleMapByMultipleAddress method names has been changed to GoogleMap (overloaded)
  • Another GoogleMap method which takes GoogleMapType as a parameter has also been added.
  • SearchNearBy method has been added. This method will use HTML geolocation API to detect user's location and mark addresses that is in radius
  • SearchByRadius method has been fixed. It correctly accepts the searching address.


Last edited Jul 7, 2013 at 4:58 PM by NamedQuery, version 14

Comments

Medes Aug 2, 2013 at 11:54 AM 
Hi and thank you for this useful post.
I have used your code however I think when I have multiple calls too GoogleMap method it mixed all of them in one single (last one) map. any Ideas why?