The Bing Maps v7 Ajax control is still a bit lacking in functionality, and good for us it’s written in JavaScript so it’s easy to extent and hack. The following hack is an “unsupported” method of adding Tooltips to Pushpins by making use of the HTML Title attribute.
The Google Maps API already has a “setTitle” method on Markers to add a Tooltip to the pins plotted. Now, thanks to this hack, the same can be done using the Bing Maps v7 Ajax control.
Here’s a full sample page that adds a map with pushpin and sets up the pushpin to have a Tooltip:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function initMap()
{
// 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);
// Add the pushpin to the map
map.entities.push(pin);
// Now that the Pushpin has been added to the Map,
// we can implement the hack to add the Tooltip
// Set the Pushpin's Tooltip via setting its HTML Dom
// Title Attribute.
pin.cm1001_er_etr.dom.setAttribute('title', 'Pushpin Title');
}
</script>
</head>
<body onload="initMap();">
<div id='myMap' style="position:relative; width:500px; height:500px;"></div>
</body>
</html>
Warning: Like I said, this is a hack and it relies on accessing part of a “non-public” API within the control. If the Bing Maps team decides to rename “cm1001_er_etr.dom” in a future update/release of Bing Maps v7 then this code will stop working.
0597582d-eb65-47af-b3c0-86f2b227ccdc|1|4.0
Bing Maps
bingmaps, javascript