How to remove previous infobubble, if I click different marker in HERE Map?
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);
}
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.