Popup cloud gets misplaced when the pushpin located at the bottom of a map AND the browser window is smaller that the “height” value of the map’s DIV (there needs to be some space below the map’s DIV to reproduce the bug in IE). See the code sample to reproduce the bug.
The code sample provides a map in a DIV with “height:500px” and some extra space below the DIV. There is a single pushpin in the very bottom of the map. If browser window height is bigger than 500 pixels then everything works fine. To reproduce the wrong behavior change your browser window height so that it is shorter than 500 pixels in height and scroll the content to the bottom of the page. Now, if you move your mouse over the pushpin the pushpin text appears way below the map at the very bottom of the page. If you make the browser window a little bigger, then popup cloud appears in vicinity of the pushpin where it supposed to be. That was tested in IE6 + latest updates.
The Fire Fox handles this situation differently but also in a wrong way. If you make browser window smaller than map’s DIV then popup block appears ABOVE the right place. The smaller the widow, the farther away moves the popup text from the pushpin (FF version:1.5.0.6)
This bug happens only when a pushpin located at the very bottom of the map. If pushpin placed in the middle area of the map then popup cloud positioned correctly.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script>
var map = null;
lat = 32.9323;
lon = -117.12;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(lat, lon), 10 ,'r' ,false);
var location = new VELatLong(32.670, -117.133);
var pin = new VEPushpin(1, location, null,
"title", "details");
map.AddPushpin(pin);
}
</script>
</head>
<body onload="GetMap();">
<div id="myMap" style="position:absolute; width:500px; height: 500px; left:10px; OVERFLOW:hidden;" > </div>
<div style="position:absolute; top:550px;">
This div is just to add some extra space at the bottom of the page
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>

Bug? Pushpin text gets misplaced if pushpin located at the bottom of map
HowardRichards
Bakerboy60
Hey thanks.
Well not being one to sit back and wait I've done something similar. The issue is we need the ID of the pin that was rolled over.
Well since we are generating the content for the pin, it dawned on me that the title of the pin is not used. So i simply stored the ID of the pin as its title.
Then changed the code to:
function PinHover(x, y, title, details)
{
var ID = title;
//var ID = event.srcElement.parentNode.id;
var e=document.getElementById(ID+"_"+map.GUID);
if(e!=null&&e!="undefined")
{
window.ero.setBoundingArea(
new Microsoft.Web.Geometry.Point(0,0),
new Microsoft.Web.Geometry.Point(document.body.clientWidth,document.body.clientHeight));
window.ero.setContent("<div id='VPOP" + ID + "'>Loading...</div>");
window.ero.dockToElement(e);
getAJAXContent(ID);
}
}
Still testing but its getting there. Slight misplacement in FF.
John.
mliesmons
Muhsin Zahid U&#287;ur
I did finally get it working in Firefox. The problem code is this: 'event.srcElement.parentNode.id'. The event.srcElement only works in IE. However I was never able to find a relable Firefox version to use. So I came up with a way to get around having to use this line of code.
What I did was this:
1. I made the pins array global.
2. Then for every pin I assigned them a number that corresponded to each point and use that as the number in the array to associate with the pin. Like so:
var pin = new VEPushpin( /*someNumber*/, new VELatLong(Lat, Lng), /*ICON*/, /*titleInformation*/, "someNumber" /*Details*/);
pins[someNumber] = pin;
map.AddPushpin(pin);
3. Then when the pinHover function got called, I regained the association like so:
function PinHover(x, y, title, details/*This item now has my someNumber*/)
{
}
4. You can now access the information within the Pin.
I hope that helps you out.
-- Erick_the_Redd
MLyons10
This is pretty whacky, indeed. It is an "edge-case" (few people will ever stumble on it, given all the things you had to do to repro it), but I've filed a bug about it because it should be fixed.
Thanks for a) finding it, b) figuring out how to repro it, and c) reporting it.
rock.aut
AndyL
I have had the same problem. I went around and around with it. And I finally found a solution that fixes it. It does have to do with the page fold.
I tested it like this:
1. I copied the
<div id="map" style="width:550px;height:500px;position:relative;"></div>
As far up to the top of my page as I could get it. Ran it and no problems what so ever.
2. I copied the same code and placed it as low as I could on my page. Re-ran it and my pushpin windows opened at the very top of my map window.
The trouble codes is this:
window.ero.setBoundingArea(
new Microsoft.Web.Geometry.Point(0,0),
new Microsoft.Web.Geometry.Point(document.body.clientWidth,document.body.clientHeight));
So what I found that fixed it was this:
window.ero.setBoundingArea(
new Microsoft.Web.Geometry.Point(0,0),
new Microsoft.Web.Geometry.Point(document.body.clientWidth,document.body.clientHeight+600));
Same code, but I added some amount of room to the "document.body.clientHeight" attribute. This fixed the problem. I used this code in conjunction with opening my pushpin windows by AJAX calls. So I am not sure where you would add it for non-AJAX.
Take a look at: http://www.viavirtualearth.com/VVE/Forum/2/378.ashx --> This is a great example of how to AJAX your pushpins.
I hope this helps out.
--Erick_the_Redd
piportill4
Hi there,
I've noticed that this issue also arises when the map is completely 'below the fold' (i.e. you must scroll to see the map). I'm trying to integrate a Virtual Earth map onto a page where the map content resides further down the page and must be scrolled to. Using the sample code from the Interactive SDK, here's an extremely rough example of how my page is structured:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script>
var map = null;
var pinID = 1;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
}
function AddPin()
{
var pin = new VEPushpin(
pinID,
map.GetCenter(),
null,
'My pushpin',
'This is pushpin number '+pinID
);
map.AddPushpin(pin);
pinID++;
}
</script>
</head>
<body onload="GetMap();AddPin();">
<div style="height:600px;"></div>
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
In both IE 7 & Firefox, the pushpin overlay is positioned incorrectly when you need to scroll to the map. Will this be addressed in the upcoming release for Nov. 7 Thanks in advance.
ititrx
Anyways, I just tried version 6 and this is still not fixed ! ! ! !
Now I need to see if the solutions posted here will work....argh!
Laura06
http://forums.microsoft.com/MSDN/ShowPost.aspx PostID=2462528&SiteID=1
http://forums.microsoft.com/MSDN/ShowPost.aspx PostID=1670388&SiteID=1
http://forums.microsoft.com/MSDN/ShowPost.aspx PostID=1663349&SiteID=1
So far, the suggestion on this thread seems to be my best bet at fixing this on my end.
ShawnKY
Hey Eric,
with the AJAX pushpin code, did you get something working in Firefox or just IE
I'm assuming the code at the ViaVE forum is missing something really simple to make it work. (or maybe it's just me ;))
John.