Google Map WebPart - CodeProject

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.

protected override void Render(HtmlTextWriter writer)
{
    string rScript = &quot;&quot;;
    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.

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.

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);