[GIS] How to trigger a map click event

eventsopenlayers-2

I have a map with some markers. On clicking a marker, a popup would appear and on clicking the map, any visible popup would be hidden. I want to hide any currently visible popup upon clicking a marker as well, and introduced a line of code in the following event listeners:

marker.events.register("click", marker, function(event) {
 map.events.triggerEvent("click", map); // this line of code added
 popup.show();
});
map.events.register("click", map, function(event) {
 popup.hide();
});

However, I get an error upon clicking of a marker with the error given as "px is undefined" on line 1981 in Openlayers.debug.js file, which is the Openlayers.Pixel class with distanceTo method. I am not sure what is wrong and can't seem to make sense of it.

Can anyone help me? Thanks.

Best Answer

Here is an example using openlayers 2:

<script type="text/javascript">

    //Set up a click handler
    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
        defaultHandlerOptions: {
            'single': true,
            'double': false,
            'pixelTolerance': 0,
            'stopSingle': false,
            'stopDouble': false
        },

        initialize: function(options) {
            this.handlerOptions = OpenLayers.Util.extend(
                {}, this.defaultHandlerOptions
            );
            OpenLayers.Control.prototype.initialize.apply(
                this, arguments
            ); 
            this.handler = new OpenLayers.Handler.Click(
                this, {
                    'click': this.trigger
                }, this.handlerOptions
            );
        }, 

        trigger: function(e) {
            //A click happened!
            var lonlat = map.getLonLatFromViewPortPx(e.xy)

            lonlat.transform(
              new OpenLayers.Projection("EPSG:900913"), 
              new OpenLayers.Projection("EPSG:4326")
            );

            alert("You clicked near " + lonlat.lat + " N, " +
                                      + lonlat.lon + " E");
        }

    });

    var map;
    function init(){
        map = new OpenLayers.Map('mapdiv');

        map.addLayer(new OpenLayers.Layer.OSM());
        map.zoomToMaxExtent();

        var click = new OpenLayers.Control.Click();
        map.addControl(click);
        click.activate();

    }
</script>
Related Question