Click here to Skip to main content
15,881,715 members
Articles / Web Development / ASP.NET
Article

Google Map WebPart

Rate me:
Please Sign up or sign in to vote.
3.13/5 (4 votes)
23 Apr 2008CPOL 57.1K   1.1K   38   7
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)


Written By
Architect
Malta Malta
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralLocation change when I set regional settings to a different region Pin
Anthonyyy21-Jun-10 5:36
Anthonyyy21-Jun-10 5:36 
GeneralGoogle Map Nigeria [modified] Pin
mbaocha3-May-09 21:43
mbaocha3-May-09 21:43 
QuestionHow I can pass paramater of langitude/latitude paramaeter from my sharepoint list Pin
sonashish29-Jun-08 9:16
sonashish29-Jun-08 9:16 
AnswerRe: How I can pass paramater of langitude/latitude paramaeter from my sharepoint list Pin
surajsukumar6-Nov-08 0:09
surajsukumar6-Nov-08 0:09 
GeneralRe: How I can pass paramater of langitude/latitude paramaeter from my sharepoint list Pin
MadWhiteHatter16-Mar-09 8:56
MadWhiteHatter16-Mar-09 8:56 
GeneralRe: How I can pass paramater of langitude/latitude paramaeter from my sharepoint list Pin
mrajpurkar16-Jul-09 3:36
mrajpurkar16-Jul-09 3:36 
GeneralRe: How I can pass paramater of langitude/latitude paramaeter from my sharepoint list [modified] Pin
ironiff21-Oct-09 4:32
ironiff21-Oct-09 4:32 

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.