What is Virtual Earth?
Virtual Earth is an online global mapping solution provided by Microsoft. Using AJAX you can quickly and easily browse around the world and explore maps and aerial photos of any part of the globe. Microsoft provide an API to integrate Virtual Earth into 3rd party web sites which is what we have done with BackgroundMotion.
Watch as John-Daniel explains about Virtual Earth
How we used Virtual Earth in BackgroundMotion
In BackgroundMotion we used Virtual Earth when adding a contribution and when viewing a contribution. On the add contribution page you can use Virtual Earth to set the location a video or picture was taken and on the view page you can get a map showing where the specific contribution was taken.
Display a map
To integrate Virtual Earth we need to add some basic JavaScript to the page, the following is added into the <head> tag of the webpage:
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
<script type="text/javascript">
var map = null;
var pinid = 0;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.SetZoomLevel(10);
}
<script>
Once you have done that we need to create a div tag to host the Virtual Earth view. Note that the ID of this div matches the value passed into the VEMap() constructor.
<div id='myMap' style="position:relative; width:300px; height:300px;"></div<
Now all that is left is to wire up the JavaScript so that it knows to load the div element to host the VirtualEarth view port. We do this by adding an onload hook on the body tag:
<body onload="GetMap();">
Where can I find out more information?