height:100% not working with v6

ReidWatkins

It appears that specifying the <div> height as a percentage breaks the version 6 map control. Here's a simple example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

var map=null;

function GetMap()

{

map = new VEMap('myMap');

map.LoadMap(new VELatLong(34.0540, -118.2370), 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);

}

</script>

</head>

</body>

</html>

Above code renders a blank page in IE6. Changing the <div> height to, say, 400px works. Any ideas

SoulSolutions

Yeah something is not quite right.

If for example it is within a div of fixed height it works fine, unfortunalty not with a height of 100% though:

Code Block

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx v=6"></script>
<script type="text/javascript">
var map=null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(34.0540, -118.2370), 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
}
</script>
</head>
<body onload="GetMap();">
<div style="height:500px; width:500px;">
<div id='myMap' style="position:relative; height:100%; width:100%;"></div>
</div>
</body>
</html>

Honestly though if you tring to do a full screen map you still need to attach to the onresize event and call the map.Resize() method or else it won't work properly, for example start wit a small IE window load with widht 100%, then maximise your window, the tiles won't render to the new screen size until you explicitly call the map resize method.

So of coarse if your going that far then you may as well resize the map to screen size at the same time I do wish there was a better solution.

John.

Daniel Hawkins

Hi

I had exactly the same problem, I had a look at maps.live.com using the IE developer toolbar, and I could see that they had their map inside a container that did have a fixed height, but the height changed as I changed the size of the window, so to get around it I handled the onresize event of the body and and set the height of the container equal to the document.documentelement.clientHeight. This solved the issue for me, but there may well be a better fix.

Something else I found was that it no longer seemed to like bringing in my stylesheet, has anyone else experienced that

jchaney88

I ran into the same problem after going from VE5 to VE6

What I had in VE5 was:

and I had to change it for VE6 to:

and everything now works like it did before

Keith K (MSFT)

The fix for v6 mashups is to add a width and height of 100% to your body style in your mashup page.

The v5 map control sets the body height and width of the page to 100%. – so setting the map div height to 100% in a v5 mashup would make it full screen. However, in v6 we removed the body style alteration because not all customers who create mashups will want their body in their page to have 100% height. We concluded the map control should not alter the elements of the page it does not own – it does not own the body.

A div in an HTML page will fill its parent’s width and height if you specify width 100% and height 100%– so if the body of the page does not have a height and a width of 100%, setting the child map div to 100% will not necessarily make it full screen.

height:100% not working with v6

Re: height:100% not working with v6

Re: height:100% not working with v6

Re: height:100% not working with v6

Re: height:100% not working with v6