Step 1: Add jQuery and gmap3 JavaScript and CSS files to your project.
The jQuery files can be found here and the gmap3 files can be found here. Or you can just download the sample project using the link at the end of this post.
Step 2: Adding References to the .js and .css files.
You can add the references to each page you plan to use your controls on, or if you are using mater pages you can add the references there.<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>One More IT Blog</title>
<script src="Scripts/jquery-2.0.0.js"></script>
<script src="Scripts/gmap3.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
Step 3: Create a class extending a WebConrol.
[Toolbox("<{0}:MapsControl runat=\"server\">")]
public class MapsControl : WebControl
{
Step 4: Add Width and Height Property with default values
#region Size
/// <summary>
/// Width
/// </summary>
public int Width
{
get
{
object s = (object)ViewState["Width"];
return ((s == null) ? 500 : (int)s);
}
set
{
ViewState["Width"] = value;
}
}
/// <summary>
/// Height
/// </summary>
public int Height
{
get
{
object s = (object)ViewState["Height"];
return ((s == null) ? 500 : (int)s);
}
set
{
ViewState["Height"] = value;
}
}
#endregion
Step 5: Add address Properties.
#region Address
/// <summary>
/// Label
/// </summary>
[Bindable(true)]
[Category("Address")]
[DefaultValue("")]
[Localizable(true)]
public string Name
{
get
{
String s = (String)ViewState["Name"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["Name"] = value;
}
}
/// <summary>
/// Address
/// </summary>
[Bindable(true)]
[Category("Address")]
[DefaultValue("")]
[Localizable(true)]
public string AddressLine1
{
get
{
String s = (String)ViewState["AddressLine1"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["AddressLine1"] = value;
}
}
/// <summary>
/// City
/// </summary>
[Bindable(true)]
[Category("Address")]
[DefaultValue("")]
[Localizable(true)]
public string City
{
get
{
String s = (String)ViewState["City"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["City"] = value;
}
}
/// <summary>
/// State
/// </summary>
[Bindable(true)]
[Category("Address")]
[DefaultValue("")]
[Localizable(true)]
public string State
{
get
{
String s = (String)ViewState["State"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["State"] = value;
}
}
/// <summary>
/// Zip Code
/// </summary>
[Bindable(true)]
[Category("Address")]
[DefaultValue("")]
[Localizable(true)]
public string ZipCode
{
get
{
String s = (String)ViewState["ZipCode"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["ZipCode"] = value;
}
}
#endregionStep 6: Add helper methods.
#region Helper
/// <summary>
/// Generate the Bubble text
/// </summary>
/// <returns></returns>
private string BubbleText()
{
return Name + "<br/>" +
AddressLine1 + "<br/>" +
City + ", " +
State + " " +
ZipCode + "<br/>" +
"<a href='http://maps.google.com/maps?daddr=" + GetAddress().Replace(' ', '+') + "' target=_new>Directions</a>";
}
/// <summary>
/// Crate an address string for google maps
/// </summary>
/// <returns></returns>
private string GetAddress()
{
return AddressLine1+", "+City+", "+State+" "+ZipCode;
}
/// <summary>
/// Create a unique id for the div
/// </summary>
private string CtrlId
{
get
{
return this.ClientID + "Map";
}
}
#endregion
Step 7: Add a method that will generate the needed JavaScript.
#region Scripts
/// <summary>
/// Generates Javascript and CSS
/// </summary>
/// <returns></returns>
private string Scripts()
{
string script ="<style>\r\n"+
" body{\r\n"+
" text-align:center;\r\n"+
" }\r\n"+
" #"+CtrlId+".gmap3{\r\n"+
" margin: 20px auto;\r\n"+
" border: 1px dashed #C0C0C0;\r\n"+
" width: " + Width + "px;\r\n" +
" height: " + Height + "px;\r\n" +
" }\r\n"+
" </style>\r\n"+
" \r\n"+
" <script type=\"text/javascript\">\r\n"+
" \r\n"+
" $(function(){\r\n"+
" $('#"+CtrlId+"').gmap3(\r\n"+
"{ \r\n"+
" marker:{\r\n"+
" address: \"" + GetAddress() + "\", data:\"\", options:{icon: \"http://maps.google.com/mapfiles/marker_green.png\"}}\r\n" +
" ,\r\n"+
" infowindow:{\r\n" +
" address:\"" + GetAddress() + "\",\r\n" +
" options:{\r\n" +
" content: \"" + BubbleText() + "\"\r\n" +
" },\r\n" +
" events:{\r\n" +
" closeclick: function(infowindow){\r\n" +
" }\r\n" +
" }\r\n" +
"},\r\n" +
" map:{\r\n"+
" options:{\r\n"+
" zoom: 14\r\n"+
" }\r\n"+
" }\r\n"+
" });\r\n"+
"});\r\n"+
" </script>\r\n";
return script;
}
#endregion
Step 8: Override the RenderContents method.
Notice that the "id" property of the div is being set to a unique value for each instance of the control. This will allow you to drop multiple map controls onto a page.#region Render
/// <summary>
/// Render Control
/// </summary>
/// <param name="output"></param>
protected override void RenderContents(HtmlTextWriter output) {
string html = "<div id=\"" + CtrlId + "\" class=\"gmap3\"></div>";
output.Write(Scripts() + html);
}
#endregionUsage Example:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="MapsDemo.aspx.cs" Inherits="CustomControls.MapsDemo" %>
<%@ Register assembly="CustomControls" namespace="CustomControls.Controls" tagprefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<cc1:MapsControl ID="MapsControl1" runat="server"
Name="Willis Tower"
AddressLine1="233 South Wacker Drive"
City="Chicago"
State="IL"
ZipCode="60606"></cc1:MapsControl>
<cc1:MapsControl ID="MapsControl2" runat="server"
Name="Omni Hotel"
AddressLine1="675 L Street"
Height="350"
Width="350"
City="San Diego"
State="CA"
ZipCode="92101"></cc1:MapsControl>
</asp:Content>
Code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CustomControls
{
public partial class MapsDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
