Display different infobox on mouseenter for an array of pushpins RRS feed

  • Question

  • I am creating an array of pushpin dynamically with separate infoboxes to be displayed  on mouse enter and display= false on mouse leave event.  How can this be achieved.
    function createIdentifyMarker(mrkpoint, htmldisplayed, i) {
      if(veIcon) {
        stackedPin[i] = new Microsoft.Maps.Pushpin(mrkpoint,{
      } else {
        stackedPin[i] = new Microsoft.Maps.Pushpin(mrkpoint);
      infoboxOptions[i] = {
        showCloseButton: true,
        zIndex: 0,
        text: '1',
        offset: new Microsoft.Maps.Point(10,160),
        htmlContent: "<div style='background-color:White;padding:8px;font-family: Verdana, Arial, Helvetica;width:300px;border-style:solid;border-width:1px;height:90px;border-color:black;font-size:12px;'>"+ htmldisplayed+"</div>;"
      pinInfobox[i] = new Microsoft.Maps.Infobox(latlong, infoboxOptions[i]);
      Microsoft.Maps.Events.addHandler(stackedPin[i], 'mouseover', function(e) {infoboxOptions[i].setOptions({ visible: true }); });
    // tried with separate functions also.
      Microsoft.Maps.Events.addHandler(stackedPin[i], 'mouseout', function(e) {infoboxOptions[i].setOptions({ visible: false }); });

    separate function to trigger the mouse enter event does not also work.


    • Moved by Ricky_Brundritt Friday, March 9, 2012 6:01 PM (From:Bing Maps: Map Control and Web services Development)
    Wednesday, April 20, 2011 6:35 AM


  • What I usually do is create and destroy the infobox as needed. This way when I hover over a pushpin I create the infobox for that pushpin, when I close it that infobox is destroyed. This makes it easier to maintain custom infoboxes for each pushpin.
    Windows Live Developer MVP - |
    Tuesday, June 7, 2011 12:33 PM