Marker in leaflet, click event
var map = L.map('map');
var marker = L.marker([10.496093,-66.881935]).on('click', onClick);
function onClick(e) {alert(e.latlng);}
marker.addTo(map)
When I do click in the marker, the alert message is: undefined
But if I put it in the variable map, it works! (shows latitude and longitude)
map.on('click', onClick);
Does someone know why it doesn't work in the marker?
The accepted answer is correct. However, I needed a little bit more clarity, so in case someone else does too:
Leaflet allows events to fire on virtually anything you do on its map, in this case a marker.
So you could create a marker as suggested by the question above:
L.marker([10.496093,-66.881935]).addTo(map).on('mouseover', onClick);
Then create the onClick function:
function onClick(e) {
alert(this.getLatLng());
}
Now anytime you mouseover that marker it will fire an alert of the current lat/long.
However, you could use 'click', 'dblclick', etc. instead of 'mouseover' and instead of alerting lat/long you can use the body of onClick to do anything else you want:
L.marker([10.496093,-66.881935]).addTo(map).on('click', function(e) {
console.log(e.latlng);
});
Here is the documentation: http://leafletjs.com/reference.html#events
Here's a jsfiddle with a function call: https://jsfiddle.net/8282emwn/
var marker = new L.Marker([46.947, 7.4448]).on('click', markerOnClick).addTo(map);
function markerOnClick(e)
{
alert("hi. you clicked the marker at " + e.latlng);
}
I found the solution:
function onClick(e) {alert(this.getLatLng());}
used the method getLatLng() of the marker
Additional relevant info: A common need is to pass the ID of the object represented by the marker to some ajax call for the purpose of fetching more info from the server.
It seems that when we do:
marker.on('click', function(e) {...
The e
points to a MouseEvent, which does not let us get to the marker object. But there is a built-in this
object which strangely, requires us to use this.options
to get to the options
object which let us pass anything we need. In the above case, we can pass some ID in an option, let's say objid
then within the function above, we can get the value by invoking: this.options.objid