open modal with marker leaflet bootstrap 3

Question

i got the map showing in the modal working. now i have a new problem. i have different objects and i will store the coordinates for the marker in the id.

like this:

<a href="#eintrag" id="[48.20682894891699, 16.370315551757812]" role="button" class="btn btn-primary" data-toggle="modal">Open Map</a>

this also opens the modal with the map. then i have this:

    var map = L.map('map', {
        center: new L.LatLng(48.20682894891699, 16.370315551757812),
        zoom: 14,
        maxBounds: bounds
    });

    jQuery(document).on("click", "a", function (event) {
        id =jQuery(this).attr('id') || '';
        console.log(id);                    
    }); 

    L.marker(id).addTo(map);

can anyone help me out with this? - the map is blank :( help much apreciated!

Answer 1

You are getting the value as string, try eval() -

var map = L.map('map', {
    center: new L.LatLng(48.20682894891699, 16.370315551757812),
    zoom: 14,
    maxBounds: bounds
});

jQuery(document).on("click", "a", function (event) {
    id =jQuery(this).attr('id');
    console.log(id);                    
}); 

L.marker(eval(id)).addTo(map);

Answer 2

Two things for starters:

1. You want to use id when it's undefined (you create it when you click a)
2. You can't use string id to init marker, you can fix it using eval()

Is this what you wanted?

BTW. For storing data you can use data-id instead of id.