none
Bing Maps v8 Ajax Control - Add actions to custom infobox RRS feed

  • Question

  • Hi,

    The v8 Preview Interactive SDK is really helpful.  It has examples on the Custom Infobox (.setHtmlContent) and Infobox Actions which are straightforward and work well.

    However, although defining an action e.g. .setOptions({ actions: [{ label: "1", eventHandler:handler1 }] });  works fine for an ordinary infobox, it seems incompatible with a custom one.

    How can an action be set on an element in a custom infobox?  Putting an onclick event on a tag in the HTML does not work. Nor does the technique of using href="javascript:handler1()" as described in your article Simple Custom Infoboxes in Bing Maps V7.

    It would be really helpful if an example of setting an action in a custom infobox could be added to the Interactive SDK by the time it comes out of Preview.

    JPL

    Friday, April 15, 2016 12:45 PM

Answers

  • Hi,

    The workaround for this problem is very simple (and with the benefit of hindsight quite obvious):
    apply style=pointer-events:auto; to the outermost <div> of the custom HTML.

    But for the custom HTML to be placed in a container from which it inherits style=pointer-events:none; seems unhelpful at best and should probably be considered a bug.

    V8 Test Map

    JPL





    • Edited by JPL5780 Thursday, April 28, 2016 3:21 PM
    • Proposed as answer by Ricky_Brundritt Friday, April 29, 2016 5:01 PM
    • Marked as answer by JPL5780 Saturday, April 30, 2016 10:23 AM
    Thursday, April 28, 2016 3:09 PM
  • Simply add the event inline:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'Your Bing Maps Key'
    });
    var center = map.getCenter();
    
    var infobox = new Microsoft.Maps.Infobox(center, {
        htmlContent: '<div id="infoboxText" style="background-color:White; border-style:solid; border-width:medium; border-color:DarkOrange; min-height:100px; width: 240px;"><input type="button" value="click me" onclick="infoboxClickMe()"/></div>'
    });
    infobox.setMap(map);
    
    function infoboxClickMe(){
    	alert('infobox button clicked');
    }


    [Blog] [twitter] [LinkedIn]

    Wednesday, November 30, 2016 4:44 PM

All replies

  • This looks like a bug. I'll have our developers look into this.

    For my reference, logged as Bug 284778


    [Blog] [twitter] [LinkedIn]

    Friday, April 15, 2016 7:44 PM
  • Ricky,

    Thanks.

    Sometimes, just occasionally, the problem is not that I am doing it wrong!

    JPL


    • Edited by JPL5780 Saturday, April 16, 2016 9:36 AM
    Saturday, April 16, 2016 9:35 AM
  • I notice also that style="cursor:pointer;" has no effect in a custom infobox.

    JPL

    Thursday, April 28, 2016 11:58 AM
  • Hi,

    The workaround for this problem is very simple (and with the benefit of hindsight quite obvious):
    apply style=pointer-events:auto; to the outermost <div> of the custom HTML.

    But for the custom HTML to be placed in a container from which it inherits style=pointer-events:none; seems unhelpful at best and should probably be considered a bug.

    V8 Test Map

    JPL





    • Edited by JPL5780 Thursday, April 28, 2016 3:21 PM
    • Proposed as answer by Ricky_Brundritt Friday, April 29, 2016 5:01 PM
    • Marked as answer by JPL5780 Saturday, April 30, 2016 10:23 AM
    Thursday, April 28, 2016 3:09 PM
  • Did you ever get events to work for a custom info box?  I have a custom infobox with a button, I can't seem to find away to bubble up the event or fire the buttons click event.  Any help would be appreciated.

    JLA

    Wednesday, November 30, 2016 2:41 PM
  • Simply add the event inline:

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'Your Bing Maps Key'
    });
    var center = map.getCenter();
    
    var infobox = new Microsoft.Maps.Infobox(center, {
        htmlContent: '<div id="infoboxText" style="background-color:White; border-style:solid; border-width:medium; border-color:DarkOrange; min-height:100px; width: 240px;"><input type="button" value="click me" onclick="infoboxClickMe()"/></div>'
    });
    infobox.setMap(map);
    
    function infoboxClickMe(){
    	alert('infobox button clicked');
    }


    [Blog] [twitter] [LinkedIn]

    Wednesday, November 30, 2016 4:44 PM