The javascript code is attached below. Two push pins are added to a Bing map. When they are hovered, the description is shown next to the pins. Two buttons are added and ShowInfoBox(shape) is called on the click event. When the buttons are clicked, for some reason, the Infobox always pops up from the center regardless where the pushpins are. Is this a known bug? Can anyone suggest a workaround?
<!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-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<script type="text/javascript">
var shape;
var shape1;
var map = null;
var infobox = "You can add html codes into the info box or change the style of the info box. You can design and show any info box you want!<br>";
function ShowInfoBox(sh)
{
// The anchor param does not seem to have any effect ???
map.ShowInfoBox(sh, new VELatLong(sh.Latitude, sh.Longitude), new VEPixel(0, 0));
}
function HideInfoBox()
{
map.HideInfoBox();
}
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(47.610377, -122.200679), 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true);
shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
shape.SetTitle("<h2>Custom Pin0</h2>");
shape.SetDescription(infobox);
//Add the shape the the map
map.AddShape(shape);
shape1 = new VEShape(VEShapeType.Pushpin, new VELatLong(47.612379, -122.201677));
shape1.SetTitle("<h2>Custom Pin1</h2>");
shape1.SetDescription(infobox);
//Add the shape the the map
map.AddShape(shape1);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<input type="button" value="1" onclick="ShowInfoBox(shape);">
<input type="button" value="2" onclick="ShowInfoBox(shape1);">
</body>
</html>