Using Virtual Earth in SharePoint (Part 1 of 2)

Over the past few weeks Daniel Colarossi and I have been working together on developing a series of Web Parts using Virtual Earth.  This article describes two ways in which you can use Virtual Earth from within SharePoint.  I will shortly be adding to these with a couple of additional ways we have used Virtual Earth.

Content Editor Web Part

The simplest way to insert a Virtual Earth map into your SharePoint page is to use the out of the box Content Editor Web Part.  All you need to do is simply add a Content Editor Web Part and past the following code into the Source Editor.  The code below will display a map centered on Melbourne Australia and also places a push pin (with my photo) on top of the Melbourne Town Hall (-37.81585174911994 Latitude and 144.965714083252 Longitude).

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script> <script type="text/javascript">
  var map = null;   function GetMap()
  {
    map = new VEMap('myMap');
    map.LoadMap(new VELatLong(-37.81585274911994, 144.9657154083252), 10,'r' ,false);
    AddPin(-37.81585274911994, 144.9657154083252, 'CodeJedi.NET', '<strong>Name:</strong> William Cornwill.<br><strong>Blog:</strong> <a target ="_new" href="http://www.codejedi.net">http://www.codejedi.net/</a><br><br><a target ="_new" href="http://www.codejedi.net"><img src="http://members.optusnet.com.au/cornwill73/siteimages/William.jpg" /></a>');
  }   function AddPin(lat, lon, iconurl, title, desc)
  {
    var shape = new VEShape(VEShapeType.Pushpin,new VELatLong(lat,lon));
    shape.SetTitle(title);
    shape.SetDescription(desc);
    map.AddShape(shape);
  }   function addLoadEvent(func)
  {
    if(typeof window.onload != 'function')
    {
      window.onload = func;
    }
    else
    {
      window.onload = function()
        {
          func();
        }
    }
  }   addLoadEvent(GetMap);
</script>
<div id='myMap' style="position:relative; width:640px; height:480px;"></div>

Basic Virtual Earth Web Part

As you might agree providing a user with some JavaScript and telling them to paste it into a Content Editor Web Part isn’t really that user friendly.  So Daniel and I have wrapped this basic functionality into a WebPart.  The Basic Virtual Earth Web Part allows a user to provide Latitude and Longitude coordinates or enter an address, a zoom level, a pin title and pin description.  The result is a user friendly and easily adjusted Virtual Earth map in a SharePoint page.

ExampleVEMap

You can download the code for the Basic Virtual Earth Web Part from the samples section of this blog.

Next time

In the next article I will be posting another two ways in which we have used Virtual Earth in SharePoint, including obtaining pin points from a SharePoint list of Lat/Longs (with an additional surprise) and also a Web Part that shows a map with pin points for all your contacts in Outlook.

These are just a couple of ways in which you could use mapping within SharePoint, there are countless other ways and I hope that this has gotten you as excited as I am about using Virtual Earth in SharePoint.

Advertisements

6 Responses to Using Virtual Earth in SharePoint (Part 1 of 2)

  1. Sezai Komur says:

    Here’s an example of a Virtual Earth Location Finder in two MOSS Sites Vivid Group built for WesTrac :

    http://www.westrac.com.au/Locations
    http://www.westrac.com.cn/Locations

  2. Michael Brunker says:

    I tried you basic virtual earth web part with WSSv3 (saved the code as .dwp file then imported) and it would not accept it. Cam back with an error that it wasn’t valid XML or webpart (something like that). Any idea how to resolve this?

  3. Tim Mavers says:

    Michael – The code he posted was C# code that needs to be compiled. You can just import the file into SharePoint.

    You’ll need to build a webpart package, sign-it, and install it. Kind of a pain, probably why he didn’t post the file itself but just the source.

  4. dave says:

    The code above that you said to paste into a content editor web part will not work for me. Am I missing a setting in my SharePoint installation that makes this not work? I just see a blank div.

  5. Devin Walker says:

    Why not just use the CEWP to display google maps? Much easier.

  6. Michael Young says:

    Is part II of this post available yet?

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

%d bloggers like this: