VEMap.ShowInfoBox Method

  • Article

You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.

Shows an information box for the shape.

VEMap.ShowInfoBox(shape, anchor, offset);

Parameters

Parameter Description

shape

The reference to the shape for which an info box is to be shown. Required.

anchor

The anchor point where the info box is docked when displayed. This can either be a VELatLong Class object or a VEPixel Class object. This value must be a valid point on the current map. Optional.

offset

If the anchor point is a VELatLong object, this parameter, a VEPixel object, specifies the anchor point's offset from that latlong position. Optional.

Remarks

The direction that the info box is placed with respect to the anchor point is handled by Bing Maps. It is placed to ensure that it does not cover the pin and is within the map boundaries.

You can customize the appearance of an information box with custom HTML in the VEShape.SetTitle Method and VEShape.SetDescription Method, as well as set styles for the information box in the VEMap.ClearInfoBoxStyles Method and VEMap.SetDefaultInfoBoxStyles Method.

At least one of the shape's VEShape.GetTitle Method, VEShape.GetDescription Method, VEShape.GetMoreInfoURL Method or VEShape.GetPhotoURL Method must return a non-zero-length value, otherwise this method does not display any information box about the shape.

Example

<!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 type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

      <script type="text/javascript">
         var map = null;
         var shape;
         var latLong = null;
            
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            latLong = map.GetCenter();

            //Add a pushpin to the map
            shape = new VEShape(VEShapeType.Pushpin, latLong);
            shape.SetTitle('<H1>Title</H1>');
            shape.SetDescription('<div style="width: 200px; background-color: white; color: blue">' +
               'This is a pushpin. It is located at <b>' + 
               latLong + '</b>. Note that custom HTML can be used.</div>');
            map.ClearInfoBoxStyles();
            map.AddShape(shape);         
         }
      
         function ShowInfoBox()
         {
            map.ShowInfoBox(shape);
         }
      
         function HideInfoBox()
         {
            map.HideInfoBox();
         }
      
         function ShowInfoBoxAt()
         {
            var x = parseInt(document.getElementById('txtMapX').value);
            var y = parseInt(document.getElementById('txtMapY').value);

            map.HideInfoBox();

            if (!isNaN(x) && !isNaN(y))
            {
               map.ShowInfoBox(shape, new VEPixel(x,y));
            }
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      <div>Click on the buttons below to show/hide the info box.</div>
      <div>
         <input value='Show info box' type='button' onclick='ShowInfoBox();'/>
         <input value='Hide info box' type='button' onclick='HideInfoBox();'/>      
      </div>
      <div>
         x:<input id='txtMapX' style='width: 30px' type='text' value='0'' />
         y:<input id='txtMapY' style='width: 30px' type='text' value='0'' />
         <input value='Show info box: x & y' type='button' onclick='ShowInfoBoxAt();'/>      
      </div>
   </body>
</html>

See Also

Reference

VEMap.HideInfoBox Method