The simplest way to create a Live.com Gadget that displays a map is to create 4 files.
In this example they are; BasicMap.xml, BasicMap.js, BasicMap.css and BasicMap.htm
These files are hosted here
http://ViaVirtualEarth.com/MyVirtualEarth/Gadgets/BasicMap/edit [JOBRIEN]: 403 forbidden on that folder - right click and save target as on these:
BasicMap.xml
BasicMap.js
BasicMap.css
BasicMap.htm
The map is displayed through an HTML file in an iFrame.
These files need to be accessable to the internet and the Live.com server, if they are hosted on your intranet this will not work.
First the XML file that defines the Gadget:
<?xml version="1.0"?>
<rss version="2.0" xmlns:binding="http://www.live.com">
<channel>
<!-- Specifies the name of Gadget -->
<title>Virtual Earth BasicMap</title>
<link>http://www.ViaVirtualEarth.com/</link>
<!-- Gives a short description of Gadget -->
<description>Shows a Virtual Earth map.</description>
<!-- Specifies the default locale for Gadget -->
<language>en-us</language>
<!-- Specifies the JavaScript object that defines Gadget
(this object must be defined in the JavaScript linked to below) -->
<binding:type>ViaVirtualEarth.Gadget.BasicMap</binding:type>
<item>
<!-- Specifies the JavaScript file that contains the code for Gadget -->
<link>http://ViaVirtualEarth.com/MyVirtualEarth/Gadgets/BasicMap/BasicMap.js</link>
</item>
<item>
<!-- Specifies the css file that contains the styles for Gadget -->
<link binding:type="css">http://ViaVirtualEarth.com/MyVirtualEarth/Gadgets/BasicMap/BasicMap.css</link>
</item>
</channel>
</rss>
Then the JS file that defines how the gadget will work
// register Gadget's namespace
registerNamespace("ViaVirtualEarth.Gadget");
// define the constructor for your Gadget (this must match the name in the manifest XML)
ViaVirtualEarth.Gadget.BasicMap = function(p_elSource, p_args, p_namespace)
{
// always call initializeBase before anything else!
ViaVirtualEarth.Gadget.BasicMap.initializeBase(this, arguments);
var m_module = p_args.module;
// Private method to output map
this.Output = function()
{
var elHeight = 350;
p_elSource.style.height=elHeight;
//To get the allocated height & width try;
var elWidth = p_elSource.offsetWidth - 20;
var url = "http://ViaVirtualEarth.com/MyVirtualEarth/Gadgets/BasicMap/BasicMap.htm";
p_elSource.innerHTML = "<iframe src=\""
+ url
+ "\" frameborder=\"0\" scrolling=\"no\" width=\""
+ elWidth
+ "\" height=\""
+ elHeight
+ "\" />";
p_args.module.resize();
}
ViaVirtualEarth.Gadget.BasicMap.registerBaseMethod(this, "Output");
this.initialize = function(p_objScope)
{
// Call base class's initialize method
ViaVirtualEarth.Gadget.BasicMap.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
this.Output();
}
ViaVirtualEarth.Gadget.BasicMap.registerBaseMethod(this, "initialize");
this.dispose = function(p_blnUnload)
{
// Usually, you would add your dipose code here, but we have nothing to dispose for this Gadget
// always call the base object's dispose last!
ViaVirtualEarth.Gadget.BasicMap.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);
}
ViaVirtualEarth.Gadget.BasicMap.registerBaseMethod(this, "dispose");
}
ViaVirtualEarth.Gadget.BasicMap.registerClass("ViaVirtualEarth.Gadget.BasicMap", "Web.Bindings.Base");A CSS file to define the styles for the Gadget
.ViaVirtualEarth_Gadget_BasicMap
{
color: navy;
letter-spacing:2px;
font-weight:bold;
}
Finally the HTML file that contains the contents displayed in the iFrame
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ViaVirtualEarth Basic Map</title>
<META http-equiv="imagetoolbar" content="no">
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script>
function OnPageLoad()
{
//load up the map
map = new VEMap('myMap');
map.LoadMap(new VELatLong(-33.7939, 151.1093),
10 ,'r' , false);
}
</script>
</head>
<body onload="OnPageLoad();" >
<div id="myMap"
style="Z-INDEX: 102; LEFT: 0px; WIDTH:100%; TOP: 0px; HEIGHT: 400px">
</div>
</body>
</html>