Leaflet: Pan, center, zoom map to marker location

Question

I'm new to Leaflet and having fun with it so far. I have an interactive map with 170 or so markers around the world. Each marker has a title in the popup. I'd also like to add a "zoom to" link inside of the popup. When the user clicks zoom to, I would like the map to center on the marker and zoom in to a certain zoom level (see image)

The markers are being generated in PHP as a marker array with the title, and lat/longs, and injected into a javascript var called "items."

    for (var i = 0; i < items.length; i++) {
        marker = new L.marker([items[i][1],items[i][2]])
            .bindPopup(items[i][0])
            .addTo(map);
    }

Answer 1

1. Keep your markers in an associative array (index must be unique).
2. Put put a link in your popup text to call a function passing this index as argument.
3. In your javascript function use panTo or flyTo

Here is some pseudo code:

var markersById = {};   

for (var i = 0; i < items.length; i++) {
  marker = new L.marker([items[i][1],items[i][2]])
      .bindPopup('<a href="javascript:centerMapOnPost(' + i + ')">Center on map</a>')
      .addTo(map);

  markersById[i] = marker;
}


function centerMapOnPost(markerId) {
    map.panTo(markersById[markerId].getLatLng());
}