google map not centering on markers ONLY when in modal -

take @ jsfiddle http://jsfiddle.net/cdrdd/2/. see how map offcenter of markers? take @ same map when not in modal http://jsfiddle.net/cdrdd/4/ works. what's going on?

function initialize() {   var addresses = $('.tracking-map-marker-details');    window.map = new google.maps.map(document.getelementbyid('map_canvas_trackingmap'), {     maptypeid: google.maps.maptypeid.hybrid   });    var infowindow = new google.maps.infowindow(),       bounds = new google.maps.latlngbounds(),       geocoder = new google.maps.geocoder();      $(addresses).each(function() {         var address  = $(this).data('address'),             letter   = $(this).data('letter'),             status   = $(this).data('status');        geocoder.geocode( { 'address': address}, function(results, status) {         if (status == google.maps.geocoderstatus.ok) {           var marker = new google.maps.marker({             icon: "http://www.google.com/mapfiles/marker" + letter + ".png",             shadow: 'http://www.google.com/mapfiles/shadow50.png',             position: results[0].geometry.location,             map: map             });              bounds.extend(results[0].geometry.location);         }       });     });    var listener = google.maps.event.addlisteneronce(map, "idle", function () {     map.fitbounds(bounds);     map.setzoom(5);      $('#tracking_map_modal').modal('show').on('shown', function () {       google.maps.event.trigger(map, 'resize');     });   });      } 

google.maps.map fitbounds ensure map's viewport contain given bounds.

you want make call google.maps.map setcenter, passing in marker's latlng:

if (status == google.maps.geocoderstatus.ok) {     // var marker = ...;     window.map.setcenter(results[0].geometry.location);     // ... }