Hi, I am integrating OSM in my site and I have a problem with Pop Ups. I put a pop up for each marker but no way. This is my code. Would greatly appreciate your help. A greeting.
function createMarkers() {
markersLayer = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markersLayer);
var size = new OpenLayers.Size(21,25);
for(var i=0; i<lstCasos.length; i++){
var lonLatMarker = transformToSphericalMercator(new OpenLayers.LonLat(lstCasos[i][2], lstCasos[i][1]));
var feature = new OpenLayers.Feature(markersLayer, lonLatMarker);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {minSize: new OpenLayers.Size(21,25) } );
feature.data.overflow = "hidden";
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size, offset);
var marker = new OpenLayers.Marker(lonLatMarker, icon);
marker.feature = feature;
var markerClick = function(evt) {
var position = this.events.getMousePosition(evt);
var lonlat = evt.object.lonlat;
if (popup == null) {
popup = new OpenLayers.Popup("popup", lonlat,
new OpenLayers.Size(240,20),
"<span style='color: black; font-weight: bold;'>" + lstCasos[i][0] + "</span><br/>"+
"<object width='160' height='96'>",
false);
popup.setBorder("1px solid black");
map.addPopup(popup);
popup.show();
} else {
popup.toggle();
}
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
markersLayer.addMarker(marker);
}
}