Search code examples
javascriptjqueryleafletmapquest

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 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.:)


Solution

  • 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