Export (0) Print
Expand All
4 out of 13 rated this helpful - Rate this topic

Infobox Class

Bing

Represents an info box on the map. You can use this class to create pop-up balloons for pushpins.

Constructor

Name Definition Description

Infobox

Infobox(location: Location , options?: InfoboxOptions )

Initializes a new instance of the Infobox class.

Methods

Name Definition Return Value Description

getActions

getActions()

Object

Returns a list of actions, where each item is a name-value pair indicating an action link name and the event name for the action that corresponds to that action link.

getAnchor

getAnchor()

Point

Returns the point on the infobox which is anchored to the map. An anchor of (0,0) is the top left corner of the infobox.

getDescription

getDescription()

string

Returns the string that is printed inside the infobox.

getHeight

getHeight()

number

Returns the height of the info box.

getHtmlContent

getHtmlContent()

string

Returns the info box as HTML.

getId

getId()

string

Returns the ID of the info box.

getLocation

getLocation()

Location

Returns the location on the map where the infobox’s anchor is attached.

getOffset

getOffset()

Point

Returns the amount the infobox pointer is shifted from the location of the infobox, or if showPointer is false, then it is the amount the infobox bottom left edge is shifted from the location of the infobox. The default value is (0,0), which means there is no offset.

getOptions

getOptions()

InfoboxOptions

Returns the info box options.

getShowCloseButton

getShowCloseButton()

boolean

Returns a boolean indicating whether the infobox close button is shown.

getShowPointer

getShowPointer()

boolean

Returns a boolean indicating whether the infobox is drawn with a pointer.

getTitle

getTitle()

string

Returns a string that is the title of the info box.

getTitleAction

getTitleAction()

Object

Returns an object containing a name-value pair indicating the link text to the right of an info box title and the event name for the action that corresponds to that link.

getTitleClickHandler

getTitleClickHandler()

function

Returns the name of the function to call when the title of the info box is clicked.

getVisible

getVisible()

boolean

Returns whether the infobox is visible. A value of false indicates that the infobox is hidden, although it is still an entity on the map.

getWidth

getWidth()

number

Returns the width of the infobox.

getZIndex

getZIndex()

number

Returns the z-index of the infobox with respect to other items on the map.

setHtmlContent

setHtmlContent(content: string )

None

Sets the HTML content of the infobox. You can use this method to change the look of the infobox. Note that info box options are ignored if custom HTML is set. Also, when custom HTML is used to represent the info box, the info box is anchored at the top-left corner.

var infoboxOptions = {width :200, height :100, showCloseButton: true, zIndex: 0, offset:new Microsoft.Maps.Point(10,0), showPointer: true};
var defInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );
map.entities.push(defInfobox);
defInfobox.setHtmlContent('<div id="infoboxText" style="background-color:White; border-style:solid;border-width:medium; border-color:DarkOrange; min-height:100px; position:absolute;top:0px; left:23px; width:240px;"><b id="infoboxTitle" style="position:absolute; top:10px; left:10px; width:220px;">myTitle</b><a id="infoboxDescription" style="position:absolute; top:30px; left:10px; width:220px;">lkjsl lkjdkl lkajdlkj klasdjfkl</a></div>');

setLocation

setLocation(location: Location )

None

Sets the location on the map where the anchor of the infobox is attached.

setOptions

setOptions(options: InfoboxOptions )

None

Sets options for the infobox.

toString

toString()

string

Converts the Infobox object to a string.

Events

Name Arguments Description

click

eventArgs:MouseEventArgs

Occurs when the mouse is used to click the infobox.

entitychanged

object: {entity:Entity}

Occurs when the location of the infobox or any of the infobox options change.

mouseenter

eventArgs:MouseEventArgs

Occurs when the mouse cursor enters the area covered by the infobox.

mouseleave

eventArgs:MouseEventArgs

Occurs when the mouse cursor leaves the area covered by the infobox.

Remarks

  • The Bing Maps AJAX Control default info box is designed for desktop browsers and may not function properly on all mobile browsers.

  • For the best performance, it is recommended that you have only one info box on the map at a time.

Example

<!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=7.0"></script>


      <script type="text/javascript">

         var map = null; 
         var pinInfobox = null;        

         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("myMap"), {credentials:"Bing Maps Key"}); 

            // Retrieve the location of the map center 
            var center = map.getCenter();
            
            // Add a pin to the center of the map
            var pin = new Microsoft.Maps.Pushpin(center, {text: '1'}); 

            // Create the info box for the pushpin
            pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0,0), {title: 'My Pushpin', visible: true});



            // Add a handler for the pushpin click event.
            Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);

            // Hide the info box when the map is moved.
            Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);


            // Add the pushpin and info box to the map
            map.entities.push(pin);
            map.entities.push(pinInfobox);

         }

         function displayInfobox(e)
         {
            pinInfobox.setOptions({ visible:true });
         }
                    

         function hideInfobox(e)
         {
            pinInfobox.setOptions({ visible: false });
         }


      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:500px; height:500px;"></div>       
</html>
Show:
© 2014 Microsoft. All rights reserved.