none
Events on Infobox in EnitityCollection don't work RRS feed

  • Question

  • Isn't it possible to bind events on a Infobox which has been added to the map through an enitity collection?

    What I'm trying to do is, using a entity collection for my info boxes for easier handling. This works so far but unfortunately events, which have been bound to the info boxes don't work. But they work when I add the infobox directly to the map without the enitity collection

    Please see my code... Any ideas how to get those events working for the info boxes inside the enitity collection?

    MyInfoBoxes = new Microsoft.Maps.EntityCollection({ zIndex: 2000 });
    
    // Add the infobox collection to the map
    MyMap.entities.push(MyInfoBoxes);
    
    //Create the infobox
    var objInfobox = new Microsoft.Maps.Infobox(objMicrosoftLocation, {
    	width: iInfoBoxImageWidth,
    	height: iInfoBoxImageHeight,
    	showPointer: false,
    	showCloseButton: true,
    	show: false,
    	visible: true,
    	zIndex: 2000,
    	offset: new Microsoft.Maps.Point(-(iInfoBoxImageWidth / 2), objPushpinImageAttribute.Height + 2),
    	htmlContent: sHTMLCode
    });
    
    //Bind a click event on the info box
    Microsoft.Maps.Events.addHandler(objInfobox, 'click', function () { alert("hallo"); });
    
    // This will add the infobox to the map BUT THE EVENT WON'T WORK
    MyInfoBoxes.push(objPushpin.InfoBox);
    
    // This will add the infobox to the map and the event will work correctly
    MyMap.entities.push(MapController.InfoBoxes);

    Wednesday, March 14, 2012 11:07 AM

Answers

All replies

  • I'm not sure exactly what's causing your issue (since you didn't paste your pages entire code), but here's a full working example that binds the click event handler on an InfoBox that is within an EntityCollection.

    <!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">
          function GetMap()
          {   
    
             var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
                               {credentials: "Your Bing Maps Key",
                                center: new Microsoft.Maps.Location(45.5, -122.5),
                                mapTypeId: Microsoft.Maps.MapTypeId.road,
                                zoom: 7});
    
    	 var MyInfoBoxes = new Microsoft.Maps.EntityCollection();
             // add infobox collection to the map
             map.entities.push(MyInfoBoxes);
    
             // get center location of map
             var center = map.getCenter();
    
             // create the infobox
             var objInfobox = new Microsoft.Maps.Infobox(center, {
             	width: 200,
             	height: 200,
                   	showPointer: false,
             	showCloseButton: true,
             	show: true,
                 	visible: true,
             	zIndex: 2000,
             	htmlContent: "<div class='myinfobox'>Custom HTML</div>"
             });
    
             // bind click event on infobox
             Microsoft.Maps.Events.addHandler(objInfobox, 'click', function() {
                      alert('hello');
             });
    
             // add InfoBox to Map
             MyInfoBoxes.push(objInfobox);
          }
          </script>
    
          <style>
                .myinfobox {
                      border: solid 1px black;
                      background: white;
                      color: black;
                      padding: 6px;
                }
          </style>
       </head>
       <body onload="GetMap();">
          <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>       
       </body>
    </html>


    Microsoft MVP - Bing Maps
    Blog: http://pietschsoft.com | Web.Maps.VE - ASP.NET AJAX Bing Maps Server Control

    Sunday, March 18, 2012 1:03 PM
  • I have the same problem in Firefox (3.6 - latest) and Chrome (latest).  My click and hover handlers were working as of last month, but now they aren't.  It seems that the map tile layer is sitting on top of the infobox layer, so your mouse interactions are fixing off map tile controls.

    The "working" example above only works in IE.  Tested in Firefox (latest) and Chrome (latest) and neither fire off the click handler.

    Wednesday, March 21, 2012 1:35 PM
  • Thanks for your reply.

    Does the example code work for you in Firefox? It works for me in IE 9 and Opera. In Firefox I can see the infobox but when I click on it no alert box pops up. Moreover, it does not work in Chrome and Safari.

    Why?


    • Edited by Krani Monday, March 26, 2012 8:39 AM
    Friday, March 23, 2012 4:47 PM
  • More people have been seeing this issue since the last bing maps update (eg see @shivs25 post). It has been an issue in certain scenarios since Dec 2011 (see http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/0c22d559-0779-4d27-9e0c-c43b0e032ff5/).

    My remarks on the issue being caused by bing setting the "pointer-events" css property in said post are applicable here too. Add this to just after the infobox has been added to your MyInfoBoxes entity collection (i.e. after <code>MyInfoBoxes.push(objInfobox)</code>):

    setTimeout(function() {
      document.querySelector('.myinfobox').parentNode.parentNode.parentNode.parentNode.style.pointerEvents = '';
    }, 500);
    And the infobox click handler will fire. 

    AFAIK the dev team is playing "works on my machine" with this one.

    • Marked as answer by Krani Tuesday, March 27, 2012 12:41 PM
    Monday, March 26, 2012 1:34 PM
  • Thanks Roatin for your reply. Sounds very interesting, I'll try it out as soon as possible.

    Isn't there any official statement from microsoft regarding this issue?

    Monday, March 26, 2012 2:37 PM
  • I've tested your solution, it works! Thanks a lot!!!
    Tuesday, March 27, 2012 12:41 PM
  • I've tested your solution, it works! Thanks a lot!!!

    Whoa whoa whoa, that wasn't really intended to be a solution, just an illustration pointing to said css property as being the culprit. Traversing .parentNode paths is arbitrary and bound to fail as your EntityCollection stack changes over time.

    The real solution can only be provided by the bing devs.

     
    Tuesday, March 27, 2012 5:02 PM
  • Have you got an answer to this yet?

    My Infobox is appearing under the map tiles on Chrome.  It works fine on IE.  The links on the infobox are not clickable.  I am setting the z-index on the infobox html as well as setting the zIndex option for the infobox.

    Wednesday, April 4, 2012 12:30 PM