VEMap.ClearInfoBoxStyles Method

ClearInfoBoxStyles Method

Clears out all of the default Bing Maps info box CSS styles.

VEMap.ClearInfoBoxStyles();

Remarks

This method internally clears out the default info box styles used to give the Bing Maps default info box its look and feel. You are left with a few basic style components to get you started. You can then reference your own CSS classes from within your custom HTML content for your ERO to style your info box as you wish.

The default style sheets that remain after this method is called are listed here:

/* Styles that apply to the info box's containing element whether it has no beak, a rightBeak, or a leftBeak */

.customInfoBox-noBeak,

.customInfoBox-with-rightBeak,

.customInfoBox-with-leftBeak

{

position: absolute;

}

/* Offset the body for the drop-shadow and set the body background and border just for starters (developers can change this easily) */

.customInfoBox-body

{

position: relative;

top: -5px;

left: -5px;

padding: 8px;

border: 1px solid #000;

background-color: #fff;

}

/* Apply a nice default drop-shadow after the default Bing Maps info box styles are cleared */

.customInfoBox-shadow

{

position: relative;

background-color: #ccc;

}

/* Sections of the info box that a developer could style if desired, but have no style when the default Bing Maps info box styles are cleared */

.customInfoBox-previewArea,

.customInfoBox-actionsBackground

{

}

/* Sections of the info box that should not be visible when the default Bing Maps info box styles are cleared */

.customInfoBox-actions,

.customInfoBox-paddingHack

{

display: none;

}

.customInfoBox-beak,

.customInfoBox-progressAnimation

{

visibility: hidden;

}

Examples

JScript

<!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 map = null;
         
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            AddPin();
         }   
         
         function AddPin()
         {  
            var center = map.GetCenter();
            var pin = map.AddPushpin(center);
            pin.SetTitle("This is the title text");
            pin.SetDescription("This is the description text.");
         }

         function ClearInfoBoxStyles()
         {
            map.ClearInfoBoxStyles();
         }
        
         function SetInfoBoxStyles()
         {
            map.SetInfoBoxStyles();
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; 
         height:400px;"></div>
      <input id="clearinfoboxstyles" type="button" 
         value="Clear default info box styles" name="clearinfoboxstyles" 
         onclick="ClearInfoBoxStyles()" />
      <input id="setinfoboxstyles" type="button" 
         value="Set default info box styles" name="setinfoboxstyles" 
         onclick="SetInfoBoxStyles()" />
   </body>
</html>

Reference

VEMap.SetDefaultInfoBoxStyles Method