How do you add marker to map using leaflet map.on('click', function) event handler

Question

I\'m trying to use an event handler to add a marker to the map. I can manage this with a callback function, but not when I separate the function from the event handler.

Answer 1

in your fiddle code, your function is in the wrong scope. try moving the function inside the map function instead of in it's own scope... i.e. instead of:

});

function addMarker(e){
// Add marker to map at click location; add popup window
var newMarker = new L.marker(e.latlng).addTo(map);
}

use

function addMarker(e){
// Add marker to map at click location; add popup window
var newMarker = new L.marker(e.latlng).addTo(map);
}
});

Answer 2

var marker = L.marker([35.737448286487595, 51.39876293182373]).addTo(map);
var popup = marker.bindPopup('<b>Hello world!</b><br />I am a popup.');

Answer 3

The main problem is that the variable map that you use inside the function addMarker is not the variable in which you store the created map. There are several ways to solve this problem but the easiest can be to assign the created map to the variable map declared in the first line. Here is the code:

var map, newMarker, markerLocation;
$(function(){
    // Initialize the map
    // This variable map is inside the scope of the jQuery function.
    // var map = L.map('map').setView([38.487, -75.641], 8);

    // Now map reference the global map declared in the first line
    map = L.map('map').setView([38.487, -75.641], 8);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        maxZoom: 18
    }).addTo(map);
    newMarkerGroup = new L.LayerGroup();
    map.on('click', addMarker);
});

function addMarker(e){
    // Add marker to map at click location; add popup window
    var newMarker = new L.marker(e.latlng).addTo(map);
}