MAP IN DIV

Hello, I have a VE map inside a <DIV> and I want it to load automaticaly but I can only get it to load then you click on it. Any ideas!?! Thanks
[150 byte] By [V.E] at [2007-12-26]
# 1

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?

CalebT-MSFT at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 2
That's odd. Can you post your source code?
DavidLuu at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 3

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>

V.E at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 4

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

SpeedOfSPin at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 5
I know how to add it like that but when it is in the DIV it is not "flush" (i believe is the word I am looking for) to the side of the page, it also has a black outline to it.
V.E at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 6

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.

CalebT-MSFT at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 7
I just reliezed we had to do this because we dont have access to the <body> so we cant use the code above. We have to get around it somehow.
V.E at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 8

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

DavidLuu at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 9

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>

V.E at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 10

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.

SoulSolutions at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...
# 11
Hey, thanks! That seemed to do just what I was wanting it to do. Thank you again for your help everyone!
V.E at 2007-9-4 > top of Msdn Tech,Windows Live Developer Forums,Virtual Earth: Map Control Development...

Windows Live Developer Forums

Site Classified