Removal of infobubbles with a markers container

[amnesia7]

Is there any chance someone could knock up a quick example of a map with multiple markers in a marker container and a remove button that clears all markers and infobubbles.

I know there's a similar example in the "playground" but it's just too complicated for me to understand because it allows markers to be created on-the-fly. I want to know how to load markers onto the map normally but allow a button to remove all markers and infobubbles from the map.

[JoergHoesel]

Hi there,

to get a map with markers in a container and have infobubbles do this:

var infoBubbles = new nokia.maps.map.component.InfoBubbles(),
    map = new nokia.maps.map.Display(myMapContainerDiv, {
        components: [infoBubbles]
    }),
    markerContainer = new nokia.maps.map.Container(),
    i = 100;
//add event listener on the marker to open the bubble
markerContainer.addListener("click", function(evt) {
    var marker = evt.target;
    infoBubbles.addBubble(marker.$infoBubbleText, marker.coordinate);
});

//add 100 markers (may be sensible to use different coordinates than always the map's center)
while(i--) {
    markerContainer.objects.add(new nokia.maps.map.StandardMarker(map.center, {
        //custom property prefixed with $ to avoid overwriting StandardMarker properties
        $infoBubbleText: "This is marker " +  i
    }));
}

//finally add the container to the map
map.objects.add(markerContainer);

To remove you can do the following:

markerContainer.objects.clear();
while(infoBubbles.openBubbleHandles.getLength() > 0) {
    infoBubbles.removeBubble(infoBubbles.openBubbleHandles.get(0));
}

[amnesia7]

Great stuff, thanks.

Sorted now!

Col