Click here to Skip to main content
Click here to Skip to main content

Google Map WebPart

By , 23 Apr 2008
 

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

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)

About the Author

Simon Bonello
Architect
Malta Malta
Member
No Biography provided

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
Hint: For improved responsiveness ensure Javascript is enabled and choose 'Normal' from the Layout dropdown and hit 'Update'.
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
GeneralLocation change when I set regional settings to a different regionmemberAnthonyyy21 Jun '10 - 5:36 
GeneralGoogle Map Nigeria [modified]membermbaocha3 May '09 - 21:43 
QuestionHow I can pass paramater of langitude/latitude paramaeter from my sharepoint listmembersonashish29 Jun '08 - 9:16 
AnswerRe: How I can pass paramater of langitude/latitude paramaeter from my sharepoint listmembersurajsukumar6 Nov '08 - 0:09 
GeneralRe: How I can pass paramater of langitude/latitude paramaeter from my sharepoint listmemberMadWhiteHatter16 Mar '09 - 8:56 
GeneralRe: How I can pass paramater of langitude/latitude paramaeter from my sharepoint listmembermrajpurkar16 Jul '09 - 3:36 
GeneralRe: How I can pass paramater of langitude/latitude paramaeter from my sharepoint list [modified]memberwankakoch21 Oct '09 - 4:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130516.1 | Last Updated 23 Apr 2008
Article Copyright 2008 by Simon Bonello
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid