Bing Maps 8 Custom Infobox

I’ve been exploring new features of the Bing Maps 8 library. An Infobox is a little popup that can display information about something on a map. The default style is a basic white rectangle. It is possible to fully customize an Infobox.


I coded up a demo that plops down a pushpin at the center of a map, and also plops down a green triangle to the left of center. The code implements event handlers so that when a user mouses-over the pushpin or the polygon, control is transferred to a function that a.) determines what type of object has been moused-over, and b.) prints information about that object in a custom-style Infobox that has rounded corners and a beige background..


The location of the pushpin can be easily displayed by the Infobox because a pushpin only has one location that can be fetched using the getLocation() function. A polygon has several locations, one for each vertex. I could have fetched them for display in the Infobox using getLocations() but I didn’t.

The key code that determines the kind of shape that is being moused-over is:

function ShowInfobox(e)
  if (e.targetType == 'pushpin') {
    var loc =;
    WriteLn('\n mouseover at ' + LatLonStr(loc));
    infobox.setOptions( { visible: true, offset: new 
      Microsoft.Maps.Point(0, 0), htmlContent:
      ibTemplate.replace('{title}', 'I am a ' +
      e.targetType + ' at').replace('{description}',
      LatLonStr(loc)) });
  else if (e.targetType == 'polygon') {
    var locs =;
    infobox.setOptions( { visible: true, offset: new 
      Microsoft.Maps.Point(0, 20), htmlContent:
      ibTemplate.replace('{title}', 'I am a ' + 
      e.targetType).replace('{description}', "") });

Anyway, very interesting and good fun.

This entry was posted in Machine Learning, Miscellaneous. Bookmark the permalink.