Marker and Popup

Hello everyone,

after playing with OSM some while now i have a (for me) huge problem.
i add several markers to a map and add those markers popups.

my problem is now, that all popups appear at the same time when i click on one marker. but only the attached popup shoudl be shown.

my code:


function setMarker(lon, lat, count){

    var icon = new OpenLayers.Icon("/src/includes/lib/map/export_badge.php?number="+count);
    var lonLatMarker = new OpenLayers.LonLat(lon, lat).transform(map.displayProjection,  map.projection);

    markers.addMarker(new OpenLayers.Marker(lonLatMarker, icon));
    markers.addMarker(new OpenLayers.Marker(lonLatMarker, icon.clone()));

    var popupId = "popup_"+Math.random(100);
    var popup = new OpenLayers.Popup.AnchoredBubble(popupId, lonLatMarker,
                                 new OpenLayers.Size(200,20),
                                 "Hello World ... "+popupId,
                                 null, true,closePopUp);
    //popup.closeOnMove = true;
    map.addPopup(popup);
    popup.hide();
    map.events.register('click', lonLatMarker, function(){popup.show();});
}

function closePopUp(){
    this.hide();
}

resolved it with this function … the closePopUp function isn’t necesary anymore


function setMarker(lon, lat, count){

    var lonLatMarker = new OpenLayers.LonLat(lon, lat).transform(map.displayProjection,  map.projection);;
    var feature = new OpenLayers.Feature(markers, lonLatMarker);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {minSize: new OpenLayers.Size(300, 180) } );
    feature.data.popupContentHTML = 'Hello World';
    feature.data.overflow = "hidden";

    var icon = new OpenLayers.Icon("/src/includes/lib/map/export_badge.php?number="+count);
    var marker = new OpenLayers.Marker(lonLatMarker, icon);
    marker.feature = feature;

    var markerClick = function(evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);

    markers.addMarker(marker);
}

Thank you for sharing your code. 5 stars *****

This solved my problem :slight_smile:

The function provided above – function setMarker(lon, lat, count) – is very similar to code for Google Maps API. I’ve worked with markers/popups with Google Maps for quite a while. But I can’t figure out how to make markers and popups work with OSM.

In the function above, the last line is “markers.addMarker(marker)”. The variable “markers” is not declared within this function. Could you share what the variable “markers” should be? I tried this but could not get the “markerClick” function to fire:


if (markersLayer == null) {
		markersLayer = new OpenLayers.Layer.Markers("Markers");
		map.addLayer(markersLayer);
}