Set bounds for markers generated by jQuery table loop?

Question

I have some jQuery code that goes through a table of location results and puts corresponding pins on a map. I am having trouble figuring out how to set the bounds so that when it goes through the loop and generates the markers on the map that it zooms and pans to fit the markers in the view. I've tried implementing code from some similar questions on this site but nothing seems to be working. Please let me know what code I should be using and where the heck I should put it in my script:

$(function() {
   var latlng = new google.maps.LatLng(44, 44);

   var settings = {
      zoom: 15,
      center: latlng,
      disableDefaultUI: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };

   var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

      $('tr').each(function(i) {

         var the_marker = new google.maps.Marker({
            title: $(this).find('.views-field-title').text(),
            map: map,
            clickable: true,
            position: new google.maps.LatLng(
               parseFloat($(this).find('.views-field-latitude').text()),
               parseFloat($(this).find('.views-field-longitude').text())
            )
         });

         var infowindow = new google.maps.InfoWindow({
            content:  $(this).find('.views-field-title').text() +
                      $(this).find('.adr').text()
         });

         new google.maps.event.addListener(the_marker, 'click', function() {
            infowindow.open(map, the_marker);

         });
      });
});

`

Answer 1

Under var map = ... add var bounds = new google.maps.Bounds(latlng, latlng);

Then in your loop under var the_marker = ... add bounds.extend(the_marker.getPosition());

Then are the loop as ended add map.fitBounds(bounds);