Hi,

I have multiple latitudes and longitudes generated dynamically. Now, I need multiple markers for various latitude and longitudes. Also I required click event which is showing infobubble with the related message.

The code below shows for only one Marker and when we click on marker showing infobubble with related message. (This is only for reference - i.e., I need same functionality for muliple markers). Please suggest how to proceed.

<!-- This is the code for Nokia Map - Single Pin (Marker) with popup onclick message -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ovi Maps API Example</title>
<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;"></div>

<style type="text/css">
.nm_bubble_content{
color:black;
background:white;
border: 1px solid black;
padding:0px;
}
</style>

<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var alat = 52.530390;
var along= 13.385190;
var bubbleContainer = new nokia.maps.map.component.InfoBubbles();
//bubbleContainer.options.defaultWidth = 50;
var coords = new nokia.maps.geo.Coordinate(alat, along);
var marker = new nokia.maps.map.StandardMarker(coords);
var infoBubble;
var restore_bubble = false;
var bubbleText = "Test message here"

map = new nokia.maps.map.Display(
document.getElementById("map"),
{
'zoomLevel': 12,
'center': [alat, along],
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector(),
bubbleContainer
]
});

var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 32, 32, 10, 10);
startMarker = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(52.530390, 13.385190), {
icon: startIcon,
anchor: new nokia.maps.util.Point(12, 12)

});
startMarker.addListener("click", function() {
infoBubble = bubbleContainer.addBubble(bubbleText, coords);
restore_bubble = true;
});
map.objects.add(startMarker);
</script>
</body>
</html>