Bing Maps in my Sharepoint? It is more likely than you think..

Actually, there are many mapping solutions for SharePoint, both commercial and open source.

The thing I didn’t understand was why it was hard to find a ‘Hello World‘ example for a Javacript based map?

Microsoft provide an interactive SDK that allows you to quickly get maps up and running in HTML.

To do the same in SharePoint 2010, I will use this SDK as the basis of an example WebPart built in Visual Studio 2010.

The main problem of integration these examples is that the Map has to be created after the page has finished loading, hence the definition of the <Body onload=””> tag.

It is really hard to add this onload attribute to SharePoint since we do not have ready access to it. In addition, by hacking away at the underlying template you might break something else.

The solution is to not use onload, but to use JQuery’s $(document).ready function, that will also make a call back once the document has finished loading.

It does mean some extra configuration of your code however.. follow the steps below:

Step 1: Create a SharePoint WebPart project in Visual 2010

Step 2: Add a SharePoint Mapped Folder to your project

Step 3: In the following dialog, add the Templates->Layouts folder

This will add a corresponding folder to your WebPart solution.

Step 4: Create a unique folder under Layouts, and add javascript files.

Create a unique folder here (I have used the name ‘FlightTracks’).

In this folder, add the JQuery javascript file. Download from here. (Hint: Use the development version for easy debugging)

Then create a new empty javascript file such as ‘FlightTracks.js’.

Step 5: Add content to the custom Javascript file

function GetMap() {
map = new VEMap('myMap');
map.LoadMap();
}

$(document).ready(function () {
GetMap();
});

Step 6: Add code to the UserControl’s CodeBehind file

        protected void Page_Load(object sender, EventArgs e)
        {
            HtmlGenericControl bingMapsScript = new HtmlGenericControl("script");
            bingMapsScript.Attributes["type"] = "text/javascript";
            bingMapsScript.Attributes["src"] = "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2";

            HtmlGenericControl jQueryScript = new HtmlGenericControl("script");
            jQueryScript.Attributes["type"] = "text/javascript";
            jQueryScript.Attributes["src"] = ResolveClientUrl("../../_LAYOUTS/FlightTracks/jquery-1.4.4.js");

            HtmlGenericControl flightTracksScript = new HtmlGenericControl("script");
            flightTracksScript.Attributes["type"] = "text/javascript";
            flightTracksScript.Attributes["src"] = ResolveClientUrl("../../_LAYOUTS/FlightTracks/FlightTracks.js");

            HtmlGenericControl script = new HtmlGenericControl("script");
            script.Attributes["type"] = "text/javascript";
            script.InnerText = "var map = null; ";

            Page.Header.Controls.Add(bingMapsScript);
            Page.Header.Controls.Add(jQueryScript);
            Page.Header.Controls.Add(script);
            Page.Header.Controls.Add(flightTracksScript);
        }

Please note that if you havn’t named your Javascript folder as ‘FlightTracks’, then you will need to adjust here.

Step 7: Define the HTML entry of the map

Bing Maps will take over a defined DIV to turn into a map. Add this line to your custom control (ascx) file:

<div id='myMap' style="position:relative; width:600px; height:400px;"></div>
Advertisements

5 thoughts on “Bing Maps in my Sharepoint? It is more likely than you think..

  1. Hi Andrew,

    I have a requirement that to Show bing maps using external list data.Am able to show bing maps.But my problem is with “Search”.Whenever i want to search based on location i need to show only few pushpins according to location.Can you please help me on this .

    Thanks,
    Sri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s