Using Virtual Earth in SharePoint (Part 1 of 2)

July 6, 2007

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=""></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=""></a><br><br><a target ="_new" href=""><img src="" /></a>');
  }   function AddPin(lat, lon, iconurl, title, desc)
    var shape = new VEShape(VEShapeType.Pushpin,new VELatLong(lat,lon));
  }   function addLoadEvent(func)
    if(typeof window.onload != 'function')
      window.onload = func;
      window.onload = function()
  }   addLoadEvent(GetMap);
<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.


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.


MOSSIG site updated

May 24, 2007

Today I finally got around to updating the content on the MOSSIG website. It is now a lot more functional and I think it looks a little better. The MOSSIG team are currently working on a more snazzy MOSS site and I will keep you all posted when that goes live. But in the meantime, enjoy the new site content.

I have to give a special thank you to Daniel Colarossi for giving some tutorial on embedding Virtual Earth in a Content Editor Web Part – pretty funky!

MOSSIG Website