Bing Maps v7 Ajax Hacks: InfoBox Description containing Html tags

Jul 10, 2011 • Mapping

For some odd reason the Bing Maps team decided to not allow HTML tags within the Description property of the InfoBox class they baked into the Bing Maps v7 Ajax control. I don’t know why they would limit it in such a way, but thankfully I have figured out a hack to override it and allow HTML tags as desired.

Here’s a full sample page that adds a map with pushpin and infobox, and sets up overriding support to allow HTML tags within the infobox’s description:

<!DOCTYPE html>

   
      
      <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;

         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
            var infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), {
                title: 'My Pushpin',
                description: 'A short description that contains ' +
                    'a couple HTML ' +
                    'tags, including a hyperlink.',
                visible: true
            });

            // Add a handler for the pushpin click event.
            Microsoft.Maps.Events.addHandler(pin, 'click', function () {
                infobox.setOptions({ visible: true });

                // Override InfoBox Description to Allow the HTML tags it contains.
                infobox.cm1001_er_etr.descriptionNode.innerHTML = infobox.getDescription();
            });

            // Hide the info box when the map is moved.
            Microsoft.Maps.Events.addHandler(map, 'viewchange', function () {
                infobox.setOptions({ visible: false });
            });


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

            // Now that the InfoBox has been added to the Map,
            // override the Description to allow HTML
            infobox.cm1001_er_etr.descriptionNode.innerHTML = infobox.getDescription();
         }
      </script>
   
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:500px; height:500px;"></div>
   </body>

Warning: This is a hack and it relies on accessing part of the “non-public” API within the control. If the Bing Maps team decides to rename “cm1001_er_etr.descriptionNode” in a future release/update of the Bing Maps v7 control, then this code may stop working.