Removing infoBubbles with HERE Maps

You created an infoBubble to show more details about a location but now you would like to take it out after a few seconds or when your user clicks somewhere else on the page. 

You have two options here:

• Close the infoBubble: The bubble will still exist and will show up when you call ui.getBubbles() and you can automatically open it again using bubble.open()

• Remove the infoBubble: This will remove the bubble so when you call ui.getBubbles() this bubble won’t be listed there anymore.

Closing Bubbles

Closing bubbles is pretty straight forward. If you have one bubble that you’d like to close you can do:

bubble.close(); 

Copy

And if you want to close all infoBubbles you can do:

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

Copy

Removing Bubbles

Removing one bubble is pretty straightforward:

ui.removeBubble(bubble);

To remove all bubbles safely you can do:

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

Using the removeBubble function to remove all bubbles can cause some surprises because removeBubble mutates an array of bubbles (this is the same array that getBubbles function returns). If you were to use a for loop, you'd be mutating the index of the bubbles list as you removed the first item with the removeBubble function. So what you don’t want to do is say bubbles.forEach(bubble => { ui.removeBubble(bubble) }). 

And here is a joke to leave you feeling all bubbly:

What is a bubble's least favorite type of music?

Pop