none
button in Map Infobox RRS feed

  • Question

  • Hi all,

    I'm trying to create a Bing Map InfoBox containing a button. On the button click the app navigate to another page. Everything is fine except that when I return to the page with the map and reshow the InfoBox the click event is not fireD anymore.

    The InfoBox is shown every time the user click on a PushPin and is hidden when the user click on the map.

    here's the code:

    function pushPinClicked() {

    [...]

    // InfoBox creation if (curInfo == null) { console.log("Creating InfoBox"); curInfo = mapService.addInfo(curPin, { title: name, description: "<a id='add-task' type='button' style='color: black; border: solid 1px black;'>Add Task Here</a>" }); document.getElementById("add-task").addEventListener('click', function () { console.log("HERE"); addTask(); }, false); } else { console.log("Updating InfoBox"); curInfo.setLocation(curPin.getLocation()); curInfo.setOptions({ title: name, visible: true }); }

    [...]

    }

    function clickedOnMap(x, y) {
        var point = new Microsoft.Maps.Point(x, y);
        var pos = mapService.pointToLocation(point);

    if (curInfo != null) {
            console.log("Hiding InfoBox");
            curInfo.setOptions({ visible: false });
        }
            curPin = mapService.addPin(pos.latitude, pos.longitude);
    }

    mapService is a class that wrap Bing Map functions

    [...]
    
    addInfo: function (pin, pinOptions) {
        var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), pinOptions);
        this._map.entities.push(pinInfobox);
    
        return pinInfobox;
    },
    [...]

    any suggestion?

    thanks,

    Luca


    Tuesday, September 9, 2014 11:57 PM

Answers

All replies

  • Hello,

    Have you tried just adding onclick="addTask();" ? Or you could consider creating the a element using document.createElement("a") - something like:

    var a = document.createElement("a");
    
    // add onclick handler
    a.onclick = (function(){addTask()});
    
    // set other attributes
    a.id = "add-task";
    a.setAttribute("type", "button");
    a.style.color = "black";
    a.style.border = "solid 1px black";
    
    // append to a parent element
    document.getElementById("someID").appendChild(a);
    

    I had a similar issue using event listeners whereby my app would register the event listeners when the app was activated, but pressing the back button to exit the app and then going back into it, the event listeners no longer worked - using onclick="someFunction();" and creating elements did get around this issue for me.

    I hope you find an answer.

    Thanks

    Thursday, September 11, 2014 3:10 PM
  • For click events in the infobox you have to specify them in the actions property of the infobox options: http://msdn.microsoft.com/en-us/library/gg675210.aspx

    Here is a sample: http://www.bingmapsportal.com/ISDK/AjaxV7#Infobox9

    I'm not a fan of this myself and created a more customizable infobox control for Bing Maps a while back which you can find here: http://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control

     

    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Friday, September 12, 2014 11:34 AM
    • Marked as answer by lucacox Friday, September 12, 2014 4:15 PM
    Friday, September 12, 2014 11:31 AM
  • Yes you are right. I've just found this actions thing...

    Not so much costomizable, but for now it does the job

    thank you

    Friday, September 12, 2014 4:15 PM