Create Bing Maps with multiple pushpin and infobox

Bing maps can be used in web pages by using Bing maps API, unlike google maps Bing maps asks user to get registered to access. Later generate the key for accessing Bing maps. In the below code latitude and latitude are given to find the specific place in maps. While clicking the pushpin infobox will show the message.



JavaScript and 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, infobox, dataLayer;

  function GetMap() 
  {
      map = new Microsoft.Maps.Map(document.getElementById("myMap"),
         {
            credentials: "Bing Mpas Key",
            center: new Microsoft.Maps.Location(0, 29)});
     dataLayer = new Microsoft.Maps.EntityCollection();
     map.entities.push(dataLayer);
     map.setView({ zoom: 5 });
   var infoboxLayer = new Microsoft.Maps.EntityCollection();
     map.entities.push(infoboxLayer);
     infobox = new Microsoft.Maps.Infobox();
     infoboxLayer.push(infobox);
     AddData();
  }

function AddData() {
//Below is temp data that contains lat , lng and description values.
    var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 30));
    pin1.Title = "This is Pin 1";
    pin1.Description = "Pin 1 description";
    Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
    dataLayer.push(pin1);

    var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 32));
    pin2.Title = "This is Pin 2";
    pin2.Description = "Pin 2 description";
    Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);
    dataLayer.push(pin2);
}

function displayInfobox(e) {
    if (e.targetType == 'pushpin') {
        infobox.setLocation(e.target.getLocation());
                 
        infobox.setOptions({
            visible: true,
            title: e.target.Title,
            description: e.target.Description
        });
    }
}
</script>

   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative;width:600px;height:400px;"></div>
   </body>
</html>