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!

Obryan

Are you trying to add a Marker to the map? Such as a point location on the map? I'm not sure what your approach is, but you certainly do not want to put the Lat/Lng inside of an element's ID. There is a better way to whatever you are trying to achieve. Please be more specific so I can make a recommendation. – Chatelaine

Answer 1

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.

Hypermeter

Answer 2

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);

Possie