Disabling Pushpin Rollover Popups

  • Article

So, I haven't done a Virtual Earth code sample for a while and have noticed that I've been hit with the question of "I have pushpins that I don't want rollover popups for. How do I disable them?" Well, here's how.

1. We'll start with a very simple Virtual Earth application which loads a map and adds a pushpin in the center. You can copy and paste the code below into notepage and run it in a browser (IE 6+ or FF 1.5+).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " https://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 src=" https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script >
<script>
var map = null;
var layerid=1;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
map.AddShape(shape);
}             
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>

2. Once you have that running you need to add two functions which override the default Virtual Earth events. One for capturing the MouseOver event; and one for capturing the MouseOut event. Add the following two functions within the script braces.

function mouseoverCB(e)
{
if (e.elementID != null)
{
//Cancel default action
return true;
}
}

function mouseoutCB(e)
{
if (e.elementID != null)
{
//Cancel default action
return true;
}

}

3. Now that you have the functions created, you'll need to attach the functions to the map control. You can do this with one line of code for each function inserted within the GetMap() method.

map.AttachEvent("onmouseover", mouseoverCB);
map.AttachEvent("onmouseout", mouseoutCB);

4. That's it! Run it and try the code and you'll see that the rollover popups. You can copy the code below for the full solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " https://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 src=" https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script >
<script>
var map = null;
var layerid=1;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
map.AddShape(shape);
map.AttachEvent("onmouseover", mouseoverCB);
map.AttachEvent("onmouseout", mouseoutCB);
}
function mouseoverCB(e)
{
if (e.elementID != null)
{
//Cancel default action
return true;
}
}

function mouseoutCB(e)
{
if (e.elementID != null)
{
//Cancel default action
return true;
}

}

</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>

CP