How To Get Focus To Map Marker When Click On A Link Outside The Map?

So, I have a map with the mapquest leaflet which showing few markers on it and have some popup messages. However, everything working well but underneath of the map I have one table

Solution 1:

You basically have to maintain an associative array of your markers.

<a href="#" onclick="focusOn('paris')">Paris</a>

// javascriptvar markers = {};
markers["paris"] = L.marker([48.85749, 2.35107]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am Paris.");

functionfocusOn(city) {
   markers[city].openPopup();
}

See example

Solution 2:

You can refer to the markers by their layerId. Make a reference to it in the list (and on the marker if you want to list to highlight when rolling over the marker).

                        marker = L.marker([c.shapePoints[0], c.shapePoints[1]]);
                        srs.addLayer(marker);
                        layerid = srs.getLayerId(marker);
                        marker.on('mouseover', function(a){
                            over(srs.getLayerId(a.target));
                        })
                        .on('mouseout', function(a){
                            out(srs.getLayerId(a.target));
                        })
                        .bindPopup(c.name);
                        tabletext = tabletext + '<tr id="row' + layerid + '" ' +
                            'onmouseover="over(' + layerid + ');" ' +
                            'onmouseout="out(' + layerid + ');">' +
                            '<td>' + c.name + '</td>' +
                            '</tr>';

Then in the over and out functions you can control the marker and list.

function over(id) {
            srs.getLayer(id).setIcon(newicon);
            $('#row' + id).css('backgroundImage', highlight);
        }

See it in action here.