How to get focus to map marker when click on a link outside the map?

Question

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 where I am showing hotel number. so like this with link:

<a href='#Hotel22'>Hotel 22</a><a href='#Hotel23'>Hotel 23</a><a href='#Hotel24'>Hotel 24</a>

So, when any user click on #Hotel22 then it will direct take focus to map's particulare marker and open up the marker window. So that user will know that the Hotel 22 is here on map...

If any one know this so My map is created in leaflet but with mapquest leaflet api way. As because of project I cann't copy/paste some of the complex code here....

Thank you in advanced my friends.:)

Answer 1

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

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

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

function focusOn(city) {
   markers[city].openPopup();
}

See example

Answer 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 .