Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / ASP.NET

Google Map WebPart

3.13/5 (4 votes)
23 Apr 2008CPOL 1   1.1K  
A Google map WebPart.

Introduction

This article presents a Google map WebPart.

Using the code

The rendering on the Google map control is performed in the WebPart Render event. The Google map control is initialized using the ClientScriptManager object.

C#
protected override void Render(HtmlTextWriter writer)
{
    string rScript = "";
    rScript += &quot;<script src=\&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=&quot; + 
               m_rGoogleKey + &quot;\&quot;\n type=\&quot;text/javascript\&quot;></script>\n&quot;;
    rScript += &quot;<script type=\&quot;text/javascript\&quot;>\n&quot;;
    rScript += &quot;//<![CDATA[\n&quot;;
    rScript += &quot;function Init()\n&quot;;
    rScript += &quot;{\n&quot;;
    rScript += &quot;var map = new GMap2(document.getElementById(\&quot;map\&quot;));\n&quot;;
    if (DisableDragging)
        rScript += &quot;map.disableDragging();\n&quot;;
    rScript += &quot;var latlng = new GLatLng(&quot; + m_dLatitude + &quot;, &quot; + m_dLongitude + &quot;);\n&quot;;
    rScript += &quot;map.setCenter(latlng, &quot; + m_nZoomLevel + &quot;);\n&quot;;
    if (DisplayZoomControl)
        rScript += &quot;map.addControl(new GLargeMapControl());\n&quot;;
    rScript += &quot;map.addControl(new GMapTypeControl());\n&quot;;
    rScript += &quot;var mkr = new GMarker(latlng);\n&quot;;
    if (DisplayIcon)
        rScript += &quot;map.addOverlay(mkr);\n&quot;;
    rScript += &quot;}\n&quot;;
    rScript += &quot;//]]>\n&quot;;
    rScript += &quot;</script>\n&quot;;
    rScript += &quot; <div id=\&quot;map\&quot; style=\&quot;width: &quot; + GWidth + &quot;px; height: &quot; + 
               GHeight + &quot;px\&quot;></div>\n&quot;;
    writer.Write(rScript);
    if (!Page.ClientScript.IsStartupScriptRegistered(&quot;MapInit&quot;))
        Page.ClientScript.RegisterStartupScript(typeof(string), &quot;MapInit&quot;,
                  &quot;Init()&quot;, true);
}

In order to be able to modify the Google map properties, I created an EditorPart class, allowing the user to change the Google API key or the dimensions of the WebPart.

C#
public class GoogleMapEditor : System.Web.UI.WebControls.WebParts.EditorPart
{
    TextBox googleKey = new TextBox();
    TextBox tbWidth = new TextBox();
    TextBox tbHeight = new TextBox();
    TextBox tbLat = new TextBox();
    TextBox tbLong = new TextBox();
    TextBox tbZoom = new TextBox();
    CheckBox chkDisplayZoom = new CheckBox();
    CheckBox chkDragging = new CheckBox();
    CheckBox chkIcon = new CheckBox(); 

Just like a standard WebPart, editor parts must override the CreateChildControls to build a user interface. The user interface is drawn by overriding the RenderContents method.

C#
protected override void RenderContents(HtmlTextWriter writer)
{
    writer.Write(&quot;Google Key <br/>&quot;);
    googleKey.RenderControl(writer);
    
    writer.Write(&quot;<br/>Width<br/>&quot;);
    tbWidth.RenderControl(writer);
    
    writer.Write(&quot;<br/>Height<br/>&quot;);
    tbHeight.RenderControl(writer);

2.jpg

Figure 1. Custom Editor

Result

1.jpg

Figure 2. Google Map WebPart

License

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