You're not doing anything unusual--the map is usually placed within a DIV. Maybe you should post your code so we can see what's missing?
Thanks for the fast reply! Here is the code below!
<TABLE>
<TBODY>
<TR>
<TD>
<SCRIPT src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
var map = null;
function OnClick()
{
map = new VEMap('map');
map.LoadMap(new VELatLong(43.56376, -83.4532452), 10 ,'r' ,false);
</SCRIPT>
<DIV id=map style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; OVERFLOW: hidden; BORDER-LEFT: 1px solid; WIDTH: 200px; BORDER-BOTTOM: 1px solid; POSITION: relative; HEIGHT: 150px" onclick=OnClick();>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
Instead of having an OnClick function, call it something like GetMap and then call it from the body onload.
From SDK http://dev.live.com/virtualearth/sdk/
Most of what you need can be found in the interactive SDK or in these forums.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script>
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(43.56376, -83.4532452), 10 ,'r' ,false);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
Thanks
SoS
Those are both style (CSS) issues; it looks like you've placed the DIV inside a table (why?), so you'll need to mess with the table, tr, td, and/or div style properties to figure out why you hve an alignment problem and a border.
If you don't have access to the body tag then you can load the map the following way (using Speed's code):
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
</head>
<body>
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<script>
var map = null;
map = new VEMap('myMap');
map.LoadMap(new VELatLong(43.56376, -83.4532452), 10 ,'r' ,false);
</script>
</body>
</html>
HTH
Hey, thanks, that worked until I had to post it on the site, it only worked if inside the div. So from my original code, is there a way to twick it minor and get it to load when the page loads? Thanks for your help also!
Original code below.
<TABLE>
<TBODY>
<TR>
<TD>
<SCRIPT src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
var map = null;
function OnClic_k()
{
map = new VEMap('map');
map.LoadMap(new VELatLong(42.3242342, -84.7654356784), 10 ,'r' ,false);
map.HideDashboard();
AddPin();
}
function AddPin()
{
var pin = new VEPushpin(1,new VELatLong(42.3242342, -84.7654356784),null,'[item.Name]','[item.Tooltip]' );
map.AddPushpin(pin);
}
</SCRIPT>
<DIV id=map style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; OVERFLOW: hidden; BORDER-LEFT: 1px solid; WIDTH: 200px; BORDER-BOTTOM: 1px solid; POSITION: relative; HEIGHT: 150px" onclick=OnClic_k();>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
I have created a page in the VE wiki for getting VE to load without using a body onload event. Maybe this will help.
http://www.viavirtualearth.com/wiki/Load+VE+control+without+body+onload.ashx
John.