Creating a custom Virtual Earth Web Part in SharePoint 2010

I had a requirement to create a web part that will pull the address information from one of the records in CRM and show it on the map.

One of the issues I faced while trying out different approaches was that after adding the web part to the SharePoint page, the scrollbar used to go missing in that page.

Finally with help of below two links I managed to develop a the web part.

Well we could make use of the below code to achieve that

public class MyVirtualEarthWebPart : WebPart
protected override void OnLoad(EventArgs e)
System.Web.UI.ClientScriptManager csm = Page.ClientScript;
StringBuilder builder = new StringBuilder();
string SCRIPT_NAME = "MapScript" + this.ID;

builder.Append("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"> \n");
builder.Append("<script type=\"text/javascript\" src=\"\"></script> \n");
builder.Append("<script type=\"text/javascript\"> \n");
builder.Append("    var map = null; \n");
builder.Append("    var latitude = null; \n");
builder.Append("    var longitude = null; \n");
builder.Append("    var address = ''; \n");
builder.Append("    var titles = new Array(); \n");

builder.Append("    function GetMap() \n");
builder.Append("    { \n");
builder.Append("        try  \n");
builder.Append("        { \n");
builder.Append("            address = 'New C G Road, chandkheda, gandhinagar';\n");
builder.Append("            map = new VEMap('myMap');\n");
builder.Append("            map.LoadMap(null,4,VEMapStyle.Hybrid); \n");
builder.Append("            map.Find(null,address,null,null,0,10,true,true,true,true,FindCallBack); \n");
builder.Append("        } \n");
builder.Append("        catch (e) \n");
builder.Append("        { \n");
builder.Append("            alert('GetMap: ' + e.message); \n");
builder.Append("        } \n");
builder.Append("    } \n");

builder.Append("    function FindCallBack(shapeLayer, results, positions, moreResults, e) \n");
builder.Append("    { \n");
builder.Append("        try  \n");
builder.Append("        { \n");
builder.Append("             if(positions != null && positions.length > 0) \n");
builder.Append("              { \n");
builder.Append("                PlacePushPin(positions[0].LatLong.Latitude,positions[0].LatLong.Longitude); \n");
builder.Append("                latitude = positions[0].LatLong.Latitude; \n");
builder.Append("                longitude = positions[0].LatLong.Longitude; \n");
builder.Append("               } \n");
builder.Append("        } catch (e) { \n");
builder.Append("            alert('FindCallBack: ' + e.message); \n");
builder.Append("        } \n");
builder.Append("      }      \n");

builder.Append("    function PlacePushPin(lat, lon){ \n");
builder.Append("                latlong = new VELatLong(lat,lon); \n");
builder.Append("                customerPushPin = new VEShape(VEShapeType.Pushpin,latlong); \n");
builder.Append("                customerPushPin.SetTitle(address); \n");
builder.Append("                map.AddShape(customerPushPin); \n");
builder.Append("                map.SetCenterAndZoom(latlong,15);  \n");
builder.Append("                } \n");

builder.Append("_spBodyOnLoadFunctionNames.push('GetMap'); \n</script> \n");

protected override void CreateChildControls()
StringBuilder builder = new StringBuilder();
builder.Append("<div id='myMap' style='position: relative; width: 300px; height: 300px;'></div>");
this.Controls.Add(new LiteralControl(builder.ToString()));



Error: ‘VEMap’ is undefined

If we get the above error while working with Virtual Earth first thing we need to check is whether the internet connection is working or not.

Next thing to check is whether JavaScript is disabled for the browser. And if this is the case, to enable it in case of IE.

Go to Tools à Internet Options à Security Tab

Find the entry Active Scripting and enable it.

Hope it helps.