none
How to do the description on a pushpin using Bing map api 8.0 RRS feed

  • Question

  • I need to set HTML description to the pushpin upon mouse hovering.

    Older versions of bing didn't need any particular events to be added and just this line would work.

    pin.SetDescription(infoHtml);

    How to achieve this using api v 8.0

    thanks

    function addPushPin(Title, Path, Latitude, Longitude){
         
          //Formulate the HTML that goes into the caption window
          var infoHtml = "<a href="http://www.blogger.com/">" + Title + "</a>";
          //Add the pushpin
          var pinLatLong = new VELatLong(Latitude, Longitude);
          var pin = new VEShape(VEShapeType.PushPin, pinLatLong);
          pin.SetTitle("<h2>" + Title + "</h2>"
          //Add an info window
          pin.SetDescription(infoHtml);
          //Add pushpin to the map
          map.AddShape(pin);
    }

    Friday, August 19, 2016 7:05 PM

Answers

  • In V8 you can store custom information in the metadata property of the pushpin. To display this information on hover you would need to use an infobox. Here is a code sample: https://msdn.microsoft.com/en-us/library/mt750274.aspx

    [Blog] [twitter] [LinkedIn]

    Friday, August 19, 2016 7:10 PM
  • Your post said V8. Bing Maps V7 is nearing end of life and will be turned off at the end of June 2017. You shouldn't do any new development with that version of the control. Note that V8 is 90% backwards compatible with V7, so migrating any code you have already written should be fairly easy.

    [Blog] [twitter] [LinkedIn]

    Monday, August 22, 2016 4:02 PM
  • Migrating to V7 shouldn't be any easier than V8. The code is nearly identical with the exception that V8 allows you to use code syntax from V7 and also use new code syntax which is significantly shorter. A migration guide for V6.3 to V8 can be found here: http://social.technet.microsoft.com/wiki/contents/articles/34568.bing-maps-v6-3-to-v8-migration-guide.aspx

    That said, if you insist on using V7, you can do the same thing as I suggested with V8. As that method works in both versions.


    [Blog] [twitter] [LinkedIn]

    Monday, August 22, 2016 10:37 PM
  • The issue you will have is that if the user mouses over the infobox, the pointer is no longer on top of the map and the mouse out event will fire. If you do insert this into the map properly, the infobox you created will not overflow outside of the bounds of the map which I suspect you don't want to be the case. What you can do is add a mouse over event on the infobox and when it fires use a boolean flag to indicate that the mouse is over the infobox, then in the map mouse over event you can check that flag and if true, do nothing, if false, hide the infobox. I've modified your code to do this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Add 50 pushpins</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;
              var pinInfoBox;  //the pop up info box
              var infoboxLayer = new Microsoft.Maps.EntityCollection();
              var pinLayer = new Microsoft.Maps.EntityCollection();
              var MM = Microsoft.Maps;
    
              var REALMAPS_BING_KEY = "YOUR_BING_MAPS_KEY";
              function getMap() {
                  map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: REALMAPS_BING_KEY });
                  addPushpins();
              }
    
              function addPushpins() {
                  var limit = 50;
                  var bounds = map.getBounds();
                  latlon = bounds.getNorthwest();
                  var lat = latlon.latitude - bounds.height / 4;
                  var lon = latlon.longitude + bounds.width / 4;
                  var latDiff = bounds.height / 2;
                  var lonDiff = bounds.width / 2;
    
                  var lat = 42.8607025;
                  var long = -83.01992;
                  
                  var arrPoints = new Array();
                  var strPushPinImage = "images/MIMMapMarkerGreen.png";
    
                  // Create the info box for the pushpin
                  pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
                  infoboxLayer.push(pinInfobox);
    
                  for (var i = 0; i < 5; i++) {                  
                          
                          if (i==0) {
                              lat = 42.8607025;
                              long = -83.01992;
                          }
                          if (i==1) {
                              lat = 42.81815;
                              long = -83.0822;
                          }
                          if (i==2) {
                              lat = 42.8303032;
                              long = -82.9892;                                          
                          }
                          if (i==3) {
                              lat = 42.87125;
                              long = -83.09837;
                          }
                          if (i==4) {
                              lat = 42.82933;
                              long = -83.0272;
                          }
                                                
                          var ll = new Microsoft.Maps.Location(lat, long);
    
                          arrPoints[i] = ll;
    
                          var pushpinOptions = {
                              width: null, height: null, htmlContent: "<span style='align:center;font-family:Arial; font-size:x-small;" +
                                 "color:Black;' >" +
                                 "<TABLE><TR><TD><img src='" + strPushPinImage + "'></TD></TR><TR><TD align='center' valign='top' width=15px><TABLE cellspacing='0' cellpadding='0' border=1 class='ordinalBox'><TR><TD bgcolor='white' align='center' >&nbsp;" + ( i + 1) + "</TD></TR></TABLE></TD></TR></TABLE>" +
                                 "</span>"
                          };
    
                          //var pushpinOptions = { icon: 'images/MIMMapMarkerGreen.png' };
                                                
                          var pushpin = new Microsoft.Maps.Pushpin(arrPoints[i], pushpinOptions);
    
                          //Microsoft.Maps.Pushpin.prototype.title = null;
                          //pushpin.Title = "title " + i;//usually title of the infobox
                          MM.Pushpin.prototype.description = null;
                          pushpin.description = GetMapBubbleInfoByProp(i); //information you want to display in the infobox
    
                      map.entities.push(pushpin);                     
                      Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displayEventInfo);
                      
                  }
                  
                  map.entities.push(pinLayer);
                  map.entities.push(infoboxLayer);
                  map.setView({ bounds: Microsoft.Maps.LocationRect.fromLocations(arrPoints), zoom: 13 });
    			  Microsoft.Maps.Events.addHandler(map, 'mouseout', closeInfoBox);
    			  Microsoft.Maps.Events.addHandler(map, 'mouseover', function(){
    				mouseIsOverMap = true;
    			  });
              }
    
    
              function displayEventInfo(e) {
                  
                  if (e.targetType = "pushpin") {
                      var pix = map.tryLocationToPixel(e.target.getLocation(), MM.PixelReference.control);
                      //var ibTitle = document.getElementById('ibTitle');
                      //ibTitle.innerHTML = e.target.title;
                      var ibDescription = document.getElementById('ibDescription');
                      ibDescription.innerHTML = e.target.description;
                      var infobox = document.getElementById('infoBox');
                      infobox.style.top = (pix.y - 60) + "px";
                      infoBox.style.left = (pix.x + 20) + "px";
                      infoBox.style.visibility = "visible";
                      document.getElementById('myMap').appendChild(infoBox);
                  }
              }
    
              function displayInfobox(e) {
                  
                  pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
                  pinInfobox.setLocation(e.target.getLocation());
              }
    
              function closeInfoBox() {
    			  mouseIsOverMap= false;
    			  
    			  //If the mouse left the map and isn't over the infobox
    			  if(!mouseIsOverInfobox){
    				  var infobox = document.getElementById('infoBox');
    				  infoBox.style.visibility = "hidden";
    			  }
              }
    		  
    		  var mouseIsOverInfobox = false;
    		  var mouseIsOverMap = false;
    		  
    		  function infoboxMouseOver(){
    			//mouseIsOverInfobox = true;
    			
    			//If the mouse is over the infobox, show the infobox.
    			var infobox = document.getElementById('infoBox');
    		    infoBox.style.visibility = "visible";
    		  }
    		  
    		  function infoboxMouseOut(){
    			//mouseIsOverInfobox = false;
    			
    			//If the mouse isn't over the infobox or the map, then hide the infobox.
    			if(!mouseIsOverMap){
    			     var infobox = document.getElementById('infoBox');
    				  infoBox.style.visibility = "hidden";
    			}
    		  }
    
              function GetMapBubbleInfoByProp(i) {
    
                  var strMapBubble = "";
                  var strSpLp = "";
                  var strLeaseSale = "";
                  var strbgColor = "#4094e6";    //"Navy";
                  var strStatusDesc = "";
                  var strPushPinText = "Pushpin ";
                  var strForeColor = "black";
                  strStatusDesc = "ACTV";
                  strbgColor = "#fcfe41";
                  strForeColor = "black";
                  strStatusDesc = "PENDING";
                  strLeaseSale = "";
                  strSpLp += "";
                  strStatusDesc = "FOR SALE";
                  strPushPinText = "";
    
                  var strTitleBarAddress = strStatusDesc + "<BR>25751 Abbey Dr<BR>" + strSpLp;
    
                  var strDetailParams = "<a style='cursor:hand' id='lnkPhoto' onclick= 'test()' class='thickbox'>";
    
                  strMapBubble = "<TABLE cellspacing='0' cellpadding='1' >" +
                      "<tr bgcolor='" + strbgColor + "'><td style='color:" + strForeColor + ";font-weight:bold;' colspan='2' valign=top>" + strPushPinText + "#" + (i + 1) + "<br>" + strTitleBarAddress + "</td></tr><TR><TD  VALIGN='TOP' ALIGN='LEFT'><img style='width:18px;height:29px;padding:3px;' src='" +
                       "images/MIMMapMarkerGreen.png" +
                      "'></TD><TD valign='top' ALIGN='LEFT' nowrap>" +
                      "<BR>MLS ID: 25478954" +
                      "<BR>Style: OVER" +
                      "<BR>Bedrooms:4 " +
                      "<br>Baths/Lavs: 2" +
                      "<br>Sq. Feet: 7000 " +
                      "</TD></TR>" +
                      "<TR id='trRemarks'><TD COLSPAN='2' wrap><br>" +
                      "test for the bing map 7.0 API. we are goin to be migrating to google maps pretty soon " +
                      "...</TD>" +
                      "</tr>";
    
                  strMapBubble += "<tr><td><br>" + strDetailParams + "Detail View</a></td></tr>" +              
                     "</TABLE>";
                  return strMapBubble;
              }
    
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style=";width:400px; height:400px;"></div>
          <div>
             <input type="button" value="AddPushpins" onclick="addPushpins();" />
              <div id='infoBox' style=";max-width:300px;  font-family:Verdana; font-size:12px" onmouseover="infoboxMouseOver()" onmouseout="infoboxMouseOut()">
        
         <table style="width:225px; border:thin solid grey;   min-height:100px; background-color:White">
           <tr>
            <td colspan="2" valign="top"><a id='ibDescription'></a></td>
           </tr>
         </table>
       </div> 
          </div>
       </body>
    </html>
    Your code goes against a lot of best practices and will be very difficult to develop/maintain and won't be easy to migrate to V8.


    [Blog] [twitter] [LinkedIn]

    Tuesday, August 23, 2016 5:39 PM

All replies

  • In V8 you can store custom information in the metadata property of the pushpin. To display this information on hover you would need to use an infobox. Here is a code sample: https://msdn.microsoft.com/en-us/library/mt750274.aspx

    [Blog] [twitter] [LinkedIn]

    Friday, August 19, 2016 7:10 PM
  • Thanks for your reply. Actually I am looking for BIng API v.7.0, and not 8.0

    The above thread is for 8/

    Could you please provide leads to achieve this using 7.0

    thanks

    Monday, August 22, 2016 2:31 PM
  • Your post said V8. Bing Maps V7 is nearing end of life and will be turned off at the end of June 2017. You shouldn't do any new development with that version of the control. Note that V8 is 90% backwards compatible with V7, so migrating any code you have already written should be fairly easy.

    [Blog] [twitter] [LinkedIn]

    Monday, August 22, 2016 4:02 PM
  • Unfortunately my company is moving towards google maps, as our other vendors are also integrating google by the end of the year. we currently are using bing 6.3 which is reaching its end of life this November.

    Bing version 7 retires in june 2017. So my immediate need is to get our mapping apps work until march 2017 when our bing map licenses expire. Found 7.0 a bit easier to migrate to than 8.0. I have rather complex mapping functionality which needs to be re-written anyways when we migrate to google.

    Monday, August 22, 2016 5:14 PM
  • Migrating to V7 shouldn't be any easier than V8. The code is nearly identical with the exception that V8 allows you to use code syntax from V7 and also use new code syntax which is significantly shorter. A migration guide for V6.3 to V8 can be found here: http://social.technet.microsoft.com/wiki/contents/articles/34568.bing-maps-v6-3-to-v8-migration-guide.aspx

    That said, if you insist on using V7, you can do the same thing as I suggested with V8. As that method works in both versions.


    [Blog] [twitter] [LinkedIn]

    Monday, August 22, 2016 10:37 PM
  • Thanks, I will try 8 as well a bit later. Now that I progressed to some extent using 7.0, I like to get my app work with 7 first.

    I was able to show the pushpin info using infobox. But I need to close the infobox when the cursor is outside of the map area.

    I have info and hyperlinks to be displayed on the infobox and allow the user to navigate to the hyperlinks , so I can't use onmouseout on pushpin to close the infobox. However, this is causing the infobox to be displayed even after I mouseout of the map. I tried adding the mouseout event on the map, but it doesn't work. Any other ideas.

    thanks in advance!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Add 50 pushpins</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;
              var pinInfoBox;  //the pop up info box
              var infoboxLayer = new Microsoft.Maps.EntityCollection();
              var pinLayer = new Microsoft.Maps.EntityCollection();
              var MM = Microsoft.Maps;
    
              var REALMAPS_BING_KEY = "My Key";
              function getMap() {
                  map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: REALMAPS_BING_KEY });
                  addPushpins();
              }
    
              function addPushpins() {
                  var limit = 50;
                  var bounds = map.getBounds();
                  latlon = bounds.getNorthwest();
                  var lat = latlon.latitude - bounds.height / 4;
                  var lon = latlon.longitude + bounds.width / 4;
                  var latDiff = bounds.height / 2;
                  var lonDiff = bounds.width / 2;
    
                  var lat = 42.8607025;
                  var long = -83.01992;
                  
                  var arrPoints = new Array();
                  var strPushPinImage = "images/MIMMapMarkerGreen.png";
    
                  // Create the info box for the pushpin
                  pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
                  infoboxLayer.push(pinInfobox);
    
                  for (var i = 0; i < 5; i++) {                  
                          
                          if (i==0) {
                              lat = 42.8607025;
                              long = -83.01992;
                          }
                          if (i==1) {
                              lat = 42.81815;
                              long = -83.0822;
                          }
                          if (i==2) {
                              lat = 42.8303032;
                              long = -82.9892;                                          
                          }
                          if (i==3) {
                              lat = 42.87125;
                              long = -83.09837;
                          }
                          if (i==4) {
                              lat = 42.82933;
                              long = -83.0272;
                          }
                                                
                          var ll = new Microsoft.Maps.Location(lat, long);
    
                          arrPoints[i] = ll;
    
                          var pushpinOptions = {
                              width: null, height: null, htmlContent: "<span style='align:center;font-family:Arial; font-size:x-small;" +
                                 "color:Black;' >" +
                                 "<TABLE><TR><TD><img src='" + strPushPinImage + "'></TD></TR><TR><TD align='center' valign='top' width=15px><TABLE cellspacing='0' cellpadding='0' border=1 class='ordinalBox'><TR><TD bgcolor='white' align='center' >&nbsp;" + ( i + 1) + "</TD></TR></TABLE></TD></TR></TABLE>" +
                                 "</span>"
                          };
    
                          //var pushpinOptions = { icon: 'images/MIMMapMarkerGreen.png' };
                                                
                          var pushpin = new Microsoft.Maps.Pushpin(arrPoints[i], pushpinOptions);
    
                          //Microsoft.Maps.Pushpin.prototype.title = null;
                          //pushpin.Title = "title " + i;//usually title of the infobox
                          MM.Pushpin.prototype.description = null;
                          pushpin.description = GetMapBubbleInfoByProp(i); //information you want to display in the infobox
    
                      map.entities.push(pushpin);                     
                      Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displayEventInfo);
                      //MM.Events.addHandler(map, 'mouseout', closeInfoBox);
                  }
                  
                  map.entities.push(pinLayer);
                  map.entities.push(infoboxLayer);
                  map.setView({ bounds: Microsoft.Maps.LocationRect.fromLocations(arrPoints), zoom: 13 });
    
              }
    
    
              function displayEventInfo(e) {
                  
                  if (e.targetType = "pushpin") {
                      var pix = map.tryLocationToPixel(e.target.getLocation(), MM.PixelReference.control);
                      //var ibTitle = document.getElementById('ibTitle');
                      //ibTitle.innerHTML = e.target.title;
                      var ibDescription = document.getElementById('ibDescription');
                      ibDescription.innerHTML = e.target.description;
                      var infobox = document.getElementById('infoBox');
                      infobox.style.top = (pix.y - 60) + "px";
                      infoBox.style.left = (pix.x + 20) + "px";
                      infoBox.style.visibility = "visible";
                      document.getElementById('myMap').appendChild(infoBox);
                  }
              }
    
              function displayInfobox(e) {
                  
                  pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
                  pinInfobox.setLocation(e.target.getLocation());
              }
    
              function closeInfoBox() {
                  var infobox = document.getElementById('infoBox');
                  infoBox.style.visibility = "hidden";
              }
    
              function GetMapBubbleInfoByProp(i) {
    
                  var strMapBubble = "";
                  var strSpLp = "";
                  var strLeaseSale = "";
                  var strbgColor = "#4094e6";    //"Navy";
                  var strStatusDesc = "";
                  var strPushPinText = "Pushpin ";
                  var strForeColor = "black";
                  strStatusDesc = "ACTV";
                  strbgColor = "#fcfe41";
                  strForeColor = "black";
                  strStatusDesc = "PENDING";
                  strLeaseSale = "";
                  strSpLp += "";
                  strStatusDesc = "FOR SALE";
                  strPushPinText = "";
    
                  var strTitleBarAddress = strStatusDesc + "<BR>25751 Abbey Dr<BR>" + strSpLp;
    
                  var strDetailParams = "<a style='cursor:hand' id='lnkPhoto' onclick= 'test()' class='thickbox'>";
    
                  strMapBubble = "<TABLE cellspacing='0' cellpadding='1' >" +
                      "<tr bgcolor='" + strbgColor + "'><td style='color:" + strForeColor + ";font-weight:bold;' colspan='2' valign=top>" + strPushPinText + "#" + (i + 1) + "<br>" + strTitleBarAddress + "</td></tr><TR><TD  VALIGN='TOP' ALIGN='LEFT'><img style='width:18px;height:29px;padding:3px;' src='" +
                       "images/MIMMapMarkerGreen.png" +
                      "'></TD><TD valign='top' ALIGN='LEFT' nowrap>" +
                      "<BR>MLS ID: 25478954" +
                      "<BR>Style: OVER" +
                      "<BR>Bedrooms:4 " +
                      "<br>Baths/Lavs: 2" +
                      "<br>Sq. Feet: 7000 " +
                      "</TD></TR>" +
                      "<TR id='trRemarks'><TD COLSPAN='2' wrap><br>" +
                      "test for the bing map 7.0 API. we are goin to be migrating to google maps pretty soon " +
                      "...</TD>" +
                      "</tr>";
    
                  strMapBubble += "<tr><td><br>" + strDetailParams + "Detail View</a></td></tr>" +              
                     "</TABLE>";
                  return strMapBubble;
              }
    
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style=" width:400px; height:400px;"></div>
          <div>
             <input type="button" value="AddPushpins" onclick="addPushpins();" />
              <div id='infoBox' style="    max-width:300px;  font-family:Verdana; font-size:12px">
        
         <table style="width:225px; border:thin solid grey;   min-height:100px; background-color:White">
           <tr>
            <td colspan="2" valign="top"><a id='ibDescription'></a></td>
           </tr>
         </table>
       </div> 
          </div>
       </body>
    </html>


    • Edited by Ricky_Brundritt Tuesday, August 23, 2016 4:54 PM Removing Bing Maps Key
    Tuesday, August 23, 2016 1:54 PM
  • The issue you will have is that if the user mouses over the infobox, the pointer is no longer on top of the map and the mouse out event will fire. If you do insert this into the map properly, the infobox you created will not overflow outside of the bounds of the map which I suspect you don't want to be the case. What you can do is add a mouse over event on the infobox and when it fires use a boolean flag to indicate that the mouse is over the infobox, then in the map mouse over event you can check that flag and if true, do nothing, if false, hide the infobox. I've modified your code to do this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title>Add 50 pushpins</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;
              var pinInfoBox;  //the pop up info box
              var infoboxLayer = new Microsoft.Maps.EntityCollection();
              var pinLayer = new Microsoft.Maps.EntityCollection();
              var MM = Microsoft.Maps;
    
              var REALMAPS_BING_KEY = "YOUR_BING_MAPS_KEY";
              function getMap() {
                  map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: REALMAPS_BING_KEY });
                  addPushpins();
              }
    
              function addPushpins() {
                  var limit = 50;
                  var bounds = map.getBounds();
                  latlon = bounds.getNorthwest();
                  var lat = latlon.latitude - bounds.height / 4;
                  var lon = latlon.longitude + bounds.width / 4;
                  var latDiff = bounds.height / 2;
                  var lonDiff = bounds.width / 2;
    
                  var lat = 42.8607025;
                  var long = -83.01992;
                  
                  var arrPoints = new Array();
                  var strPushPinImage = "images/MIMMapMarkerGreen.png";
    
                  // Create the info box for the pushpin
                  pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
                  infoboxLayer.push(pinInfobox);
    
                  for (var i = 0; i < 5; i++) {                  
                          
                          if (i==0) {
                              lat = 42.8607025;
                              long = -83.01992;
                          }
                          if (i==1) {
                              lat = 42.81815;
                              long = -83.0822;
                          }
                          if (i==2) {
                              lat = 42.8303032;
                              long = -82.9892;                                          
                          }
                          if (i==3) {
                              lat = 42.87125;
                              long = -83.09837;
                          }
                          if (i==4) {
                              lat = 42.82933;
                              long = -83.0272;
                          }
                                                
                          var ll = new Microsoft.Maps.Location(lat, long);
    
                          arrPoints[i] = ll;
    
                          var pushpinOptions = {
                              width: null, height: null, htmlContent: "<span style='align:center;font-family:Arial; font-size:x-small;" +
                                 "color:Black;' >" +
                                 "<TABLE><TR><TD><img src='" + strPushPinImage + "'></TD></TR><TR><TD align='center' valign='top' width=15px><TABLE cellspacing='0' cellpadding='0' border=1 class='ordinalBox'><TR><TD bgcolor='white' align='center' >&nbsp;" + ( i + 1) + "</TD></TR></TABLE></TD></TR></TABLE>" +
                                 "</span>"
                          };
    
                          //var pushpinOptions = { icon: 'images/MIMMapMarkerGreen.png' };
                                                
                          var pushpin = new Microsoft.Maps.Pushpin(arrPoints[i], pushpinOptions);
    
                          //Microsoft.Maps.Pushpin.prototype.title = null;
                          //pushpin.Title = "title " + i;//usually title of the infobox
                          MM.Pushpin.prototype.description = null;
                          pushpin.description = GetMapBubbleInfoByProp(i); //information you want to display in the infobox
    
                      map.entities.push(pushpin);                     
                      Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', displayEventInfo);
                      
                  }
                  
                  map.entities.push(pinLayer);
                  map.entities.push(infoboxLayer);
                  map.setView({ bounds: Microsoft.Maps.LocationRect.fromLocations(arrPoints), zoom: 13 });
    			  Microsoft.Maps.Events.addHandler(map, 'mouseout', closeInfoBox);
    			  Microsoft.Maps.Events.addHandler(map, 'mouseover', function(){
    				mouseIsOverMap = true;
    			  });
              }
    
    
              function displayEventInfo(e) {
                  
                  if (e.targetType = "pushpin") {
                      var pix = map.tryLocationToPixel(e.target.getLocation(), MM.PixelReference.control);
                      //var ibTitle = document.getElementById('ibTitle');
                      //ibTitle.innerHTML = e.target.title;
                      var ibDescription = document.getElementById('ibDescription');
                      ibDescription.innerHTML = e.target.description;
                      var infobox = document.getElementById('infoBox');
                      infobox.style.top = (pix.y - 60) + "px";
                      infoBox.style.left = (pix.x + 20) + "px";
                      infoBox.style.visibility = "visible";
                      document.getElementById('myMap').appendChild(infoBox);
                  }
              }
    
              function displayInfobox(e) {
                  
                  pinInfobox.setOptions({ title: e.target.Title, description: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
                  pinInfobox.setLocation(e.target.getLocation());
              }
    
              function closeInfoBox() {
    			  mouseIsOverMap= false;
    			  
    			  //If the mouse left the map and isn't over the infobox
    			  if(!mouseIsOverInfobox){
    				  var infobox = document.getElementById('infoBox');
    				  infoBox.style.visibility = "hidden";
    			  }
              }
    		  
    		  var mouseIsOverInfobox = false;
    		  var mouseIsOverMap = false;
    		  
    		  function infoboxMouseOver(){
    			//mouseIsOverInfobox = true;
    			
    			//If the mouse is over the infobox, show the infobox.
    			var infobox = document.getElementById('infoBox');
    		    infoBox.style.visibility = "visible";
    		  }
    		  
    		  function infoboxMouseOut(){
    			//mouseIsOverInfobox = false;
    			
    			//If the mouse isn't over the infobox or the map, then hide the infobox.
    			if(!mouseIsOverMap){
    			     var infobox = document.getElementById('infoBox');
    				  infoBox.style.visibility = "hidden";
    			}
    		  }
    
              function GetMapBubbleInfoByProp(i) {
    
                  var strMapBubble = "";
                  var strSpLp = "";
                  var strLeaseSale = "";
                  var strbgColor = "#4094e6";    //"Navy";
                  var strStatusDesc = "";
                  var strPushPinText = "Pushpin ";
                  var strForeColor = "black";
                  strStatusDesc = "ACTV";
                  strbgColor = "#fcfe41";
                  strForeColor = "black";
                  strStatusDesc = "PENDING";
                  strLeaseSale = "";
                  strSpLp += "";
                  strStatusDesc = "FOR SALE";
                  strPushPinText = "";
    
                  var strTitleBarAddress = strStatusDesc + "<BR>25751 Abbey Dr<BR>" + strSpLp;
    
                  var strDetailParams = "<a style='cursor:hand' id='lnkPhoto' onclick= 'test()' class='thickbox'>";
    
                  strMapBubble = "<TABLE cellspacing='0' cellpadding='1' >" +
                      "<tr bgcolor='" + strbgColor + "'><td style='color:" + strForeColor + ";font-weight:bold;' colspan='2' valign=top>" + strPushPinText + "#" + (i + 1) + "<br>" + strTitleBarAddress + "</td></tr><TR><TD  VALIGN='TOP' ALIGN='LEFT'><img style='width:18px;height:29px;padding:3px;' src='" +
                       "images/MIMMapMarkerGreen.png" +
                      "'></TD><TD valign='top' ALIGN='LEFT' nowrap>" +
                      "<BR>MLS ID: 25478954" +
                      "<BR>Style: OVER" +
                      "<BR>Bedrooms:4 " +
                      "<br>Baths/Lavs: 2" +
                      "<br>Sq. Feet: 7000 " +
                      "</TD></TR>" +
                      "<TR id='trRemarks'><TD COLSPAN='2' wrap><br>" +
                      "test for the bing map 7.0 API. we are goin to be migrating to google maps pretty soon " +
                      "...</TD>" +
                      "</tr>";
    
                  strMapBubble += "<tr><td><br>" + strDetailParams + "Detail View</a></td></tr>" +              
                     "</TABLE>";
                  return strMapBubble;
              }
    
          </script>
       </head>
       <body onload="getMap();">
          <div id='myMap' style=";width:400px; height:400px;"></div>
          <div>
             <input type="button" value="AddPushpins" onclick="addPushpins();" />
              <div id='infoBox' style=";max-width:300px;  font-family:Verdana; font-size:12px" onmouseover="infoboxMouseOver()" onmouseout="infoboxMouseOut()">
        
         <table style="width:225px; border:thin solid grey;   min-height:100px; background-color:White">
           <tr>
            <td colspan="2" valign="top"><a id='ibDescription'></a></td>
           </tr>
         </table>
       </div> 
          </div>
       </body>
    </html>
    Your code goes against a lot of best practices and will be very difficult to develop/maintain and won't be easy to migrate to V8.


    [Blog] [twitter] [LinkedIn]

    Tuesday, August 23, 2016 5:39 PM