CODEWITHSUNDEEP
javascripthere-api
ekim boran
ekim boran

Reputation: 1819

How can i create more than one infobubble in Here Maps

I need to place unlimited number of infobubbles for different occasions in the map. However whenever i place the second one, there is an error

IllegalArgument: Component instance with ID "InfoBubbles" already registered

Clearly, the problem is i need to assign each one a different id (i think the default id is "InfoBubbles" ) but i could not figure out how to do that. 

var infoBubble1 = new nokia.maps.map.component.InfoBubbles();
var infoBubble2 = new nokia.maps.map.component.InfoBubbles();
map.components.add(infoBubble1);
map.components.add(infoBubble2); --> Error

I tried;

infoBubble1 .set("id", "xxx");
var infoBubble1 = new nokia.maps.map.component.InfoBubbles({id = "xxx"}); -> not valid since infobubbles only have an empty constructor.

I use the version 2.5.4.

Upvotes: 1

Views: 1120

Answers (1)

Jason Fox
Jason Fox

Reputation: 5290

This is a nomenclature problem - there are too many bubbles in the API. You are mixing up the nokia.maps.map.component.InfoBubbles component (plural), which allows balloon texts to be created, with the nokia.maps.map.component.InfoBubbles.Bubble interface itself (singular), which displays a balloon text on screen (actually adds a DOM element over the map).

There can only ever be one unique component with a unqiue id - hence the JavaScript library complains if you try to include it twice.

The way to open a new balloon text is to use InfoBubbles.openBubble() method which states:

This method creates a new info bubble, updates it with content and shows it on the map.

Parameters:

content: {String | DomElement} The content to be shown in the info bubble; it can be an HTML string, please note that Flash content in the bubble overlap other elements in the document

coordinate: {nokia.maps.geo.Coordinate} An object containing the geographic coordinates of the location, where the bubble's anchor is to be placed.

onUserClose: {Function} [optional] A callback method which is called when user closes the bubble (by clicking on close button) to be placed.

hideCloseButton: {Boolean} [optional] Hides close button if set to true.

A working example can be found in the Legacy API explorer - the important line of code is as follows:

var infoBubble = new nokia.maps.map.component.InfoBubbles();
map.components.add(infoBubble);
infoBubbles.openBubble(bubbleText1, coordinate1);
infoBubbles.openBubble(bubbleText2, coordinate2);

Infobubbles

So add your component once, and use the openBubble() method multiple times.

Upvotes: 4

Related Questions