none
Bing Maps v7 Infobox with htmlContent and Events RRS feed

  • Question

  • Hey @ all,

    if have a problem with the bing maps AJAX control v7:

    I added to my map an entity collection for infoboxes. those infoboxes have all a individual htmlContent option.The htmtContent contains some buttons.I try to invoke some actions, if the buttons were clicked, but nothing happens.

    I already checked the MouseDown event for the map instance, and it seems that the infobox doesn't get this event, cause the targetType of the mousedown event is "map" if i click on items of the infobox :(

    could you please help me with my problem?

     

    • Moved by Ricky_Brundritt Saturday, March 10, 2012 11:06 AM (From:Bing Maps: Map Control and Web services Development)
    Friday, April 8, 2011 12:02 PM

Answers

  • Maybe the Bing Maps AJAX v7 does not allow you to get a good control on the way they implemented the htmlContent on a infobox, you should take a look at using your own implementation or extend the existing one.

    See for example Johannes iSDK: http://talkingdonkey.cloudapp.net/BM-AJ-V7/Default.aspx

    <!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>
    
    

    And if you change the construction of the infobox:

    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;
    	 ibTitle.onclick = function(e) {
    		alert('title click');
    	 }
    	 var ibDescription = document.getElementById('ibDescription');
    	 ibDescription.innerHTML = e.target.description;
    	 ibDescription.onclick = function(e) {
    		alert('description click');
    	 }
    	 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);
     }
    }
    
    

    If you plan to use the integrated infobox (that came with the updated v7), see:

    http://msdn.microsoft.com/en-us/library/gg675210.aspx

    http://msdn.microsoft.com/en-us/library/gg675208.aspx

    You should take a more precise look to the 'actions' property, like:

    // Create an info box 
          var infoboxOptions = {width:300, 
                     height: 100, 
                     title: "Information Box Title", 
                     description: "This is the map.", 
                     showPointer: false, 
                     titleClickHandler: InfoboxHandler, 
                     offset: new Microsoft.Maps.Point(-100,0)};
          var myInfobox = new Microsoft.Maps.Infobox(center, infoboxOptions);
    

    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Friday, April 8, 2011 12:37 PM
    Moderator

All replies

  • Maybe the Bing Maps AJAX v7 does not allow you to get a good control on the way they implemented the htmlContent on a infobox, you should take a look at using your own implementation or extend the existing one.

    See for example Johannes iSDK: http://talkingdonkey.cloudapp.net/BM-AJ-V7/Default.aspx

    <!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>
    
    

    And if you change the construction of the infobox:

    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;
    	 ibTitle.onclick = function(e) {
    		alert('title click');
    	 }
    	 var ibDescription = document.getElementById('ibDescription');
    	 ibDescription.innerHTML = e.target.description;
    	 ibDescription.onclick = function(e) {
    		alert('description click');
    	 }
    	 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);
     }
    }
    
    

    If you plan to use the integrated infobox (that came with the updated v7), see:

    http://msdn.microsoft.com/en-us/library/gg675210.aspx

    http://msdn.microsoft.com/en-us/library/gg675208.aspx

    You should take a more precise look to the 'actions' property, like:

    // Create an info box 
          var infoboxOptions = {width:300, 
                     height: 100, 
                     title: "Information Box Title", 
                     description: "This is the map.", 
                     showPointer: false, 
                     titleClickHandler: InfoboxHandler, 
                     offset: new Microsoft.Maps.Point(-100,0)};
          var myInfobox = new Microsoft.Maps.Infobox(center, infoboxOptions);
    

    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Friday, April 8, 2011 12:37 PM
    Moderator
  • Hey Nicolas,

    thank your for your fast and detailed answer. I already thought about creating an hmtl-element outside the map for the infobox, but i thought, i maybe did something wrong with the maps-infobox or the events.

    thanks for the source code. I will try your solution and tell you, if i got it working.

    EDIT: I tried Nicolas solution and it worked fine. I had only some issue's about variable-names (like infoBox and infobox) but never mind. thank your for the code and your help :)

    best regards 

    Tino



    Friday, April 8, 2011 7:22 PM
  • hi Nicolas, thats a great post you had. But i have some thing similar to the above post and i am confident that only you can help me.

    I want to add Multiple infobox's on different locations on the bing map with image on the same depicting the location and a brief description of the same.

    Now i am pulling my hair to get the solution as I want to set the pointers of infobox of the lat and long fetched from the backend (mysql database) but also if possible , not using the lat and long field instead of only location names (if possible), which i feel is more complicated than what i want. but i would rather want advise on getting the lat and long from the database. i have to create the location and its corrosponding lat and long data in the database table, right?? from where it will fetch the data and transfer the same to the map telling where to point the infobox along with the image , thumbnail image. How am i suppose to do it with the Bing Maps. if you can tell me how to include multiple infoboxs with image and description and how to collect the data from the database as well then that will be very helpful to me.

    i am totally lost here and need your urgent advise and help.

    Sunday, July 24, 2011 5:30 PM
  • I've got multiple infoboxes using the infobox control, but I haven't figured out how to get the pin description into the box.  
    I tried adding this into the function (displayInfobox(e)
    var description = document.getElementById('ibDescription');
    ibDescription.innerHTML = e.target.Description;

    But then the box was blank.  

    Any help or insight would be most appreciated ! 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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;
    var MM = Microsoft.Maps;
    var pinLayer, pinInfobox;
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
    credentials: "YOUR KEY HERE",
    center: new MM.Location(29.759251, -95.420082),
    zoom: 11,
    showDashboard: false,
    enableSearchLogo: false,
    enableClickableLogo: false,
    mapTypeId: Microsoft.Maps.MapTypeId.road 
    });
    try {
                      // Create the tile layer source
                      var tileSource = new Microsoft.Maps.TileSource({ uriConstructor: 'http://gisstage.hcfcd.org/ArcGIS/rest/services/ChartingBuffalo/MapServer/vetile/{quadkey}' });
     
                      // Construct the layer using the tile source
                      var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource , opacity: .6 });
     
                      // Push the tile layer to the map
                      map.entities.push(tilelayer);
     
                  }
                  catch (err) {
                      alert('Error Message:' + err.message);
                  }
    var pushpinOptions = {icon: 'http://www.brickenandassociates.com/images/hotspot-trans.png',height:20, width:21};
    //Create two layers, one for pushpins, the other for the infobox. This way the infobox will always be above the pushpins.
    pinLayer = new Microsoft.Maps.EntityCollection();
    map.entities.push(pinLayer);
    var infoboxLayer = new Microsoft.Maps.EntityCollection();
                map.entities.push(infoboxLayer);
    // Create the info box for the pushpin
                pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0,0), {visible: false});
    infoboxLayer.push(pinInfobox);
    //Create a test pushpiin
    var pin = new Microsoft.Maps.Pushpin(new MM.Location(29.759251, -95.420082));
    pin.Title = 'Bayou Bend';
    pin.Description = 'Buffalo Bayou at Chimney Rock Road.<br/><img  src="http://www.brickenandassociates.com/images/hotspots/buffalo/chimney_rock/IMG_0768.scaled.jpg">'; 
    var pin1 = new Microsoft.Maps.Pushpin(new MM.Location(29.773416, -95.479871));
    pin1.Title = 'Chimney Rock';
    pin1.Description = 'Buffalo Bayou at Chimney Rock Road.<br/><img  src="http://www.brickenandassociates.com/images/hotspots/buffalo/chimney_rock/IMG_0768.scaled.jpg">'; 
    Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
    pinLayer.push(pin);
    pin.cm1001_er_etr.dom.setAttribute('title', 'Bayou Bend');
    pinLayer.push(pin1);
    pin1.cm1001_er_etr.dom.setAttribute('title', 'Chimney Rock');
             }
             function displayInfobox(e)
             {  
     
    if (e.targetType == "pushpin") {
       
    pinInfobox.setOptions({title: e.target.Title, description: e.target.Description, visible:true, offset: new Microsoft.Maps.Point(0,25)});
    pinInfobox.setLocation(e.target.getLocation());
    //A buffer limit to use to specify the infobox must be away from the edges of the map.
    var buffer = 25; 
    var infoboxOffset = pinInfobox.getOffset();
    var infoboxAnchor = pinInfobox.getAnchor();
    var infoboxLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);
    var dx = infoboxLocation.x + infoboxOffset.x - infoboxAnchor.x;
    var dy = infoboxLocation.y - 25 - infoboxAnchor.y;
    if(dy < buffer){ //Infobox overlaps with top of map.
    //Offset in opposite direction.
    dy *= -1;
    //add buffer from the top edge of the map.
    dy += buffer;
    }else{
    //If dy is greater than zero than it does not overlap.
    dy = 0;
    }
    if(dx < buffer){ //Check to see if overlapping with left side of map.
    //Offset in opposite direction.
    dx *= -1;
    //add a buffer from the left edge of the map.
    dx += buffer; 
    }else{ //Check to see if overlapping with right side of map.
    dx = map.getWidth() - infoboxLocation.x + infoboxAnchor.x - pinInfobox.getWidth();
    //If dx is greater than zero then it does not overlap.
    if(dx > buffer){
    dx = 0;
    }else{
    //add a buffer from the right edge of the map.
    dx -= buffer;
    }
    }
    //Adjust the map so infobox is in view
    if(dx != 0 || dy != 0){
    map.setView({ centerOffset : new Microsoft.Maps.Point(dx,dy), center : map.getCenter()});
    }
    }
             }
          </script>
          <style type="text/css">
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    #header {
    overflow: hidden;
    position: absolute;
    z-index: 2222;
    top: 0px;
    float:left;
    }
    #header_right {
    overflow: hidden;
    position: relative;
    z-index: 2222;
    top: 0px;
    float:right;
    }
    .the_head {
    width: 100%;
    height: 129px;
    background-color:#A8CDDF;
    }
    #padding {
    }
    .controls {
    border: 1px solid black;
    position: absolute;
    top: 240px;
    left: 20px;
    padding: 4px;
    white-space: nowrap;
    background-color: #FFF;
    display: block;
    z-index: 555;
    font-family: Verdana;
    font-size: 12px;
    }
    #buffalokey, #whiteoakkey, #lowerwhiteoakkey {
      width: 18px;
      height: 18px;
      display: inline-block;
    }
    #buffalokey {
      background-color: rgb(176,201,144);
    }
    #whiteoakkey {
      background-color: rgb(134,174,184);
    }
    #lowerwhiteoakkey {
      background-color: rgb(89,129,154);
    }
    #studyareakey {
      width: 18px;
      height: 2px;
      margin-bottom: 5px;
      margin-top: 5px;
      display: inline-block;
      background-color: rgb(150, 75, 0);
    }
          </style></head>
       <body onload="GetMap();">
       <div class="the_head">
    <img src="images/temp-header.png" width="925" height="237" id="header" />
    <img id="header_right" src="images/NewHeader_Right.png" />
    </div>
        <div class="controls">
          <h3>Legend</h3>
          <label><div id="studyareakey"></div> Study Area</label><br />
          <label><div id="buffalokey"></div> Buffalo Bayou Watershed</label><br />
          <label><div id="whiteoakkey"></div> White Oak Bayou Watershed</label><br />
          <label><div id="lowerwhiteoakkey"></div> Lower White Oak Bayou</label><br />
        </div>
          <div id='myMap' style="position:relative; width:100%; height:1024px;"></div>
          </body>
    </html>
    Friday, September 30, 2011 1:19 AM