Programatically adding buttons to Google Map that jump to markers - ajax

Question

I'm pulling data from mySQL through Laravel, generating a map, which works well, now I just want buttons that jump to each marker. For some reason it only goes to the last position.
$.ajax({
url: '/lookup',
type: "post",
data: {'lat':$("#lat").val() ,'lng':$("#lng").val(), '_token': $('input[name=_token]').val()},
success: function(data){
var nearest = data;
var markers = data;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i].lat, markers[i].lng);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i].name,
icon: 'http://website.com/assets/images/icons/love_google.png'
});
google.maps.event.addDomListener(document.getElementById("link_"+i), "click", function(e) {
alert(position);
map.setCenter(position);
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.setContent('<div class="info_content"><h3>' + markers[i].name + '</h3><p>' + markers[i].address + '<br />' + markers[i].city + ', ' + markers[i].state + ' ' + markers[i].zip + '<br />' + markers[i].phone + '</p></div>' );
infoWindow.open(map, marker);
}
})(marker, i));
}
}
});

Answer 1

You should construct the event listener for the button click in the same way you're doing it for the marker click. The problem is that position at the time you click the button will be just whatever that variable is at that point in time, not whatever it was on the iteration of the loop when you constructed the event listener.
Try something like:
google.maps.event.addDomListener(document.getElementById("link_"+i), "click", (function(position) {
return function() {
alert(position);
map.setCenter(position);
}
})(position));