none
Bind Maps V8 Infobox Actions RRS feed

  • Question

  • I have had a couple of issues with the 'actions' functionality of the infobox. In my code I have a single infobox declared, and the content and available actions change depending on what was clicked on. Some items have no actions and I am unable to remove actions - only replace them with others. For example, I can set an infobox with

    infoBox.setOptions({ actions: [{ label: 'Say Hello', eventHandler: function (e) { alert('Hello'); } }] });

    but then if the next clicked item has no actions, calling

    infoBox.setOptions({actions: null});

    doesn't clear the actions. If the item has a different action, I can implement this and it works fine. Passing an empty array clears the actions but leaves the horizontal rule in place.

    The other issue I've had occurs when adding several actions, which causes text to wrap and disappear below the bottom of the box. I would personally prefer it if the actions appeared as separate lines rather than being separated by a '|' character. I've worked around these issues by dumping the actions altogether and creating my own by using HTML in the description field, but it would be good to find a proper fix.


    Wednesday, September 14, 2016 3:10 PM

Answers

  • The infobox actions are primarily there for backwards compatibility. I'm not really a fan of them and recommend not using them. You can easily pass in HTML into the description of an infobox and add your events in there. That would give you a lot more control over rendering and would also allow you to control the events better.

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, September 14, 2016 5:57 PM
    • Marked as answer by gwenci Wednesday, September 14, 2016 6:56 PM
    Wednesday, September 14, 2016 5:57 PM
  • Well it end up being simple ... I feel a little silly, standard stuff.  I change my script from a jquery listener to an inline javascript client function and it worked as expected.  inside my custom html i added a button:

     <button type="button" id="btnCloseInfo" <button onclick="fnCloseInfo()" >Close</button>

    //java script on my page

        function fnCloseInfo(e) {
            console.log("close info");
            infobox.setOptions({ visible: false });      
        };

    JLA

    Wednesday, November 30, 2016 4:11 PM
  • You answered your own question just as I was about to post an example. Here's the example I put together:

    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:43 PM

All replies

  • The infobox actions are primarily there for backwards compatibility. I'm not really a fan of them and recommend not using them. You can easily pass in HTML into the description of an infobox and add your events in there. That would give you a lot more control over rendering and would also allow you to control the events better.

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, September 14, 2016 5:57 PM
    • Marked as answer by gwenci Wednesday, September 14, 2016 6:56 PM
    Wednesday, September 14, 2016 5:57 PM
  • Ah, ok. For some reason I thought they were new in V8. I'll stick with my workaround then.

    Wednesday, September 14, 2016 6:56 PM
  • Can you point me to an example of this?  I can't seem to capture a mouse event on a button inside a custom infobox.

    Thanks


    JLA

    Wednesday, November 30, 2016 3:13 PM
  • Well it end up being simple ... I feel a little silly, standard stuff.  I change my script from a jquery listener to an inline javascript client function and it worked as expected.  inside my custom html i added a button:

     <button type="button" id="btnCloseInfo" <button onclick="fnCloseInfo()" >Close</button>

    //java script on my page

        function fnCloseInfo(e) {
            console.log("close info");
            infobox.setOptions({ visible: false });      
        };

    JLA

    Wednesday, November 30, 2016 4:11 PM
  • You answered your own question just as I was about to post an example. Here's the example I put together:

    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:43 PM