none
InfoboxOptions height auto in Bing Maps v7

    Question

  • Is it possible to have a the height auto of the info box ?
    I don't know the size of the content that I put in, and the default is 126.

    Wednesday, May 04, 2011 1:24 PM

Answers

  • You can set the height by using a CSS hack:

    .Infobox { height: auto !important; }
    

    But as you will see, you will have to deal with the wrong position of the infobox, that you can fix by setting it on your own.

    Another approach would be to implement your own InfoBox as presented here:
    http://talkingdonkey.cloudapp.net/BM-AJ-V7/Default.aspx

     

    Here is Johannes' sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title>Bing Maps - v7.0</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 MM = Microsoft.Maps;
    
         function GetMap() {
           map = new MM.Map(document.getElementById("myMap"), {
             credentials: "YOUR BING MAPS KEY",
             center: new MM.Location(51.46117933094501, -0.9259434789419174),
             mapTypeId: "a",
             zoom: 18
           });
    
           var pushpinOptions = { icon: './IMG/pushpin.png' };
           var pushpin = new MM.Pushpin(new MM.Location(51.46117933094501, -0.9259434789419174), pushpinOptions);
           
           //extend the pushpin class to store information for popup
           MM.Pushpin.prototype.title = null;
           pushpin.title = "Microsoft Campus";
           MM.Pushpin.prototype.description = null;
           pushpin.description = "Thames Valley Park<br>Reading, RG6 1WG<br>UNITED KINGDOM";
    
           //add a click event
           pushpinClick = MM.Events.addHandler(pushpin, 'click', displayEventInfo);
    
           //close the infobox when the map is panned or zoomed
           MM.Events.addHandler(map, 'viewchangestart', closeInfoBox);
    
           map.entities.push(pushpin);
         }
    
         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 closeInfoBox() {
           var infobox = document.getElementById('infoBox');
           infoBox.style.visibility = "hidden";
         }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div><br />
       <div id='infoBox' style="visibility:hidden; position:absolute; top:0px; left:0px; max-width:300px; z-index:10000; font-family:Verdana; font-size:12px">
        <img src="IMG/leftbeak.png" alt="Left Beak"style="position:absolute;top:10px; left:0px;" />
         <table style="width:275px; border:medium solid Orange; position:absolute;top:0px; left:22px; min-height:100px; background-color:White">
           <tr style="width:275px;">
            <td style="width:275px" valign="top"><b id='ibTitle'></b></td>
            <td align="right" valign="top"><img src="IMG/close.png" alt="close" onclick="closeInfoBox()" /></td>
           </tr>
           <tr>
            <td colspan="2" valign="top"><a id='ibDescription'></a></td>
           </tr>
         </table>
       </div> 
      </body>
    </html>
    
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Wednesday, May 04, 2011 3:03 PM
    Moderator
  • If you want auto sizing Infoboxes then take a look at the custom infobox module: http://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control

    http://rbrundritt.wordpress.com

    Friday, August 30, 2013 10:39 AM
    Owner

All replies

  • You can set the height by using a CSS hack:

    .Infobox { height: auto !important; }
    

    But as you will see, you will have to deal with the wrong position of the infobox, that you can fix by setting it on your own.

    Another approach would be to implement your own InfoBox as presented here:
    http://talkingdonkey.cloudapp.net/BM-AJ-V7/Default.aspx

     

    Here is Johannes' sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title>Bing Maps - v7.0</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 MM = Microsoft.Maps;
    
         function GetMap() {
           map = new MM.Map(document.getElementById("myMap"), {
             credentials: "YOUR BING MAPS KEY",
             center: new MM.Location(51.46117933094501, -0.9259434789419174),
             mapTypeId: "a",
             zoom: 18
           });
    
           var pushpinOptions = { icon: './IMG/pushpin.png' };
           var pushpin = new MM.Pushpin(new MM.Location(51.46117933094501, -0.9259434789419174), pushpinOptions);
           
           //extend the pushpin class to store information for popup
           MM.Pushpin.prototype.title = null;
           pushpin.title = "Microsoft Campus";
           MM.Pushpin.prototype.description = null;
           pushpin.description = "Thames Valley Park<br>Reading, RG6 1WG<br>UNITED KINGDOM";
    
           //add a click event
           pushpinClick = MM.Events.addHandler(pushpin, 'click', displayEventInfo);
    
           //close the infobox when the map is panned or zoomed
           MM.Events.addHandler(map, 'viewchangestart', closeInfoBox);
    
           map.entities.push(pushpin);
         }
    
         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 closeInfoBox() {
           var infobox = document.getElementById('infoBox');
           infoBox.style.visibility = "hidden";
         }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='myMap' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div><br />
       <div id='infoBox' style="visibility:hidden; position:absolute; top:0px; left:0px; max-width:300px; z-index:10000; font-family:Verdana; font-size:12px">
        <img src="IMG/leftbeak.png" alt="Left Beak"style="position:absolute;top:10px; left:0px;" />
         <table style="width:275px; border:medium solid Orange; position:absolute;top:0px; left:22px; min-height:100px; background-color:White">
           <tr style="width:275px;">
            <td style="width:275px" valign="top"><b id='ibTitle'></b></td>
            <td align="right" valign="top"><img src="IMG/close.png" alt="close" onclick="closeInfoBox()" /></td>
           </tr>
           <tr>
            <td colspan="2" valign="top"><a id='ibDescription'></a></td>
           </tr>
         </table>
       </div> 
      </body>
    </html>
    
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Wednesday, May 04, 2011 3:03 PM
    Moderator
  • Nicolas, good on you for finding a workaround, but if it's really not possible to set this to auto-size without a hack it makes the Bing Maps control look like a bit of a joke... I'm going to keep looking...

    ...if a simple answer comes up, it might turn up here: http://stackoverflow.com/questions/17106049/bing-maps-autoadjusting-infobox-for-its-content

    • Edited by adamgp Friday, August 30, 2013 3:10 AM
    Friday, August 30, 2013 2:58 AM
  • If you want auto sizing Infoboxes then take a look at the custom infobox module: http://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control

    http://rbrundritt.wordpress.com

    Friday, August 30, 2013 10:39 AM
    Owner