How to remove previous infobubble, if I click different marker in HERE Map?

Question

Here below is my code to add an infobubble. I want to remove the current infobubble previously after click(tap) on a different marker.

function addInfoBubble(map) 
    {
    var group = new H.map.Group();
    map.addObject(group);
    // add 'tap' event listener, that opens info bubble, to the group
    group.addEventListener('tap', function(evt) {
    // event target is the marker itself, group is a parent event target
    // for all objects that it contains
    var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
    // read custom data
    content: evt.target.getData()
    });
    // show info bubble
    ui.addBubble(bubble);
    }, false);
    }

Where should I place the code line ui.removeBubble(bubble) if I click on a different marker?

Answer 1

You could remove all infobubbles from ui just before adding a new one. If you don't mind removing all current bubbles being displayed, something like this should work:

ui.getBubbles().forEach(bub => ui.removeBubble(bub));

Incorporating it to your code:

function addInfoBubble(map) {
   var group = new H.map.Group();
   map.addObject(group);
   // add 'tap' event listener, that opens info bubble, to the group
   group.addEventListener('tap', function(evt) {
      // event target is the marker itself, group is a parent event target
      // for all objects that it contains
      var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
        // read custom data
        content: evt.target.getData()
      });
      //remove infobubbles
      ui.getBubbles().forEach(bub => ui.removeBubble(bub));

      // show info bubble
      ui.addBubble(bubble);
   }, false);
}

Answer 2

Here's a more in-depth summary of things you can do:

Remove the last infobubble that was created:

ui.removeBubble(bubbles[bubbles.length - 1])

Close the first infobubble that was created:

bubbles[bubbles.length - 1].close()

Remove the first infobubble that was created:

ui.removeBubble(bubbles[0])

Close all the bubbles:

bubbles.forEach((bubble) => {
    bubble.close()
});

Remove all the bubbles

while(bubbles.length > 0) {
   this.ui.removeBubble(bubbles[0])
}

Click on the infobubbles Demo so you can try these out.