In this example we add a pushpin and tootip.
code
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<style>
#map-canvas{
height: 400,
width: 600
}
pre{
width:1200px;
}
.contentTableWrapper td,
.contentTableWrapper th{
border: 1px solid black;
padding:5px;
}
img{
padding:0px;
}
</style>
<script type="text/javascript">
function createMap()
{
/* Your map key should go here as well as other map options (see below) */
var mapOptions = { credentials:"mU8oWDqfsv7mokFDSI9D~z9kt6yiuMwZapLioiwcSsw~AquHdfN08Bh3KC1h3QB11UKcMEuhui6_gK_qExCheA7vJdFR5ZFSyzCV1lwwbV_N",
height: 400,
width: 600,
mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
showMapTypeSelector: false,
center: new Microsoft.Maps.Location(45.50030, -73.54368),
zoom: 20
};
/* map is placed in div with id = map-canvas */
var map = new Microsoft.Maps.Map(document.getElementById("map-canvas"), mapOptions );
/* creat an infobox */
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point( 10, 20), height:110, showCloseButton: false });
//add to entity list
map.entities.push(infobox);
/* create a pushpin with pin options*/
var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(45.50030, -73.54368));
pin.setOptions(
{
width: 32,
height: 32,
visible : true,
typeName: 'mypin'
});
/* hardcode Title and description of the pushpin */
pin.Title = "Habitat 67";
pin.Description = "2600 Av Pierre-Dupuy<br /> Montréal, Quebec,<br /> H3C 3R6";
/* Add mouseover, mouseout events */
Microsoft.Maps.Events.addHandler(pin, 'mouseover', displayInfobox);
Microsoft.Maps.Events.addHandler(pin, 'mouseout', displayInfoboxClose);
/* add pushpin to entry list */
map.entities.push(pin);
/* Event Show Bing Maps Infobox */
function displayInfobox(e) {
if (e.targetType == 'pushpin') {
infobox.setLocation(e.target.getLocation());
infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description });
}
}
/* Event Show Bing Maps Infobox */
function displayInfoboxClose(e) {
if (e.targetType == 'pushpin') {
infobox.setLocation(e.target.getLocation());
infobox.setOptions({ visible: false});
}
}
}
</script>
</head>
<body onload="createMap();">
<h4>Bing Map with pushpin and infobox</h4>
<p>In this example we add a pushpin and tootip.</p>
<br/>
<div id='map-canvas'></div>
<div id="mainBody">
<br/><br/>