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>
<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;
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 <i>short</i> description that contains ' +
'a couple <span style="color: red; font-weight: bold;">HTML</span> ' +
'tags, including a <a href="#">hyperlink</a>.',
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>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:500px; height:500px;"></div>
</body>
</html>
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.
4cc95c7e-52bc-487b-9b6f-54d0b59f0d02|3|4.7
Bing Maps
bingmaps, javascript