javascript - google maps fitBounds not working with ajax function - only seems to work with one marker -

i'm having strange issue fitbounds not working after ajax call. on initial page load, fitbounds works fine, , centers 5 markers. however, after click on 1 of dropdown filters or pagination (which triggers ajax function update markers, doesn't want load, though appears trying center map based on markers should be. filters working because outputting list of maker locations beside map.

i have noticed, if adjust query show 1 marker @ time, fitbounds tends work better, although not time. seems though in "for loop" may throwing off. still don't have 100% success rate showing 1 marker. seems work bit better part.

regardless of how many markers output ajax function, eventually, after clicking on filters multiple times, it's map lags out. show marker, map behind won't right. , map start more , more distorted each time each time filters triggered. strange thing once trigger ajax function new marker, if hover on zoom bar on map, automatically slides way bottom , can't moved. , if try move map clicking , dragging, whole thing turns solid gray.

below first function loads markers once page loads. works fine , fitbounds @ point.

var mapcanvas = document.getelementbyid('map-canvas');         var mapoptions = {           center: new google.maps.latlng(-30, -209.6),           zoom: 3,           maxzoom: 4,           maptypeid: google.maps.maptypeid.roadmap         }          // create map         var map = new google.maps.map(mapcanvas, mapoptions);          // array hold markers         var markers = [];          //  create new viewpoint bound         var bounds = new google.maps.latlngbounds ();          // loop through array , add markers map         for( = 0; < jqueryarray.length; i++ ) {              var position = new google.maps.latlng(jqueryarray[i]['lat'], jqueryarray[i]['long']);             var marker = new google.maps.marker({                 position: position,                 map: map,                 icon: mapicon, // assume has been set                 title: jqueryarray[i]['title']             });              //  increase bounds , fit map             bounds.extend (position);             map.fitbounds (bounds);              markers.push(marker);         } // end of loop 

and here other function called ajax once dropdown menu filters trigged. again, seems have trouble if more 1 marker needs added map. functions works without using fitbounds, though, there issue way using fitbounds.

// function adds new map markers after select menu change         function addnewmarkers(json, count) {             (var = 0; < count; i++ ) {                 markers[i].setmap(null);             }              // reset markers array             markers = [];              //  create new viewpoint bound. need again?             var bounds = new google.maps.latlngbounds ();             //bounds = new google.maps.latlngbounds(null);              // loop through our array , add markers map               for( = 0; < json.length; i++ ) {                  var myposition = new google.maps.latlng(json[i].lat, json[i].long);                 var marker = new google.maps.marker({                     position: myposition,                     map: map,                     icon: mapicon,  // assume has been set                     title: json[i].title                 });                  //  increase bounds , fit map                 bounds.extend (myposition);                 map.fitbounds (bounds);                  markers.push(marker);             } // end of loop         } // end of addnewmarkers function 

you calling map.fitbounds(bounds) in each iteration of loop.

move call after loop instead of calling each time. need of points added bounds before calling fitbounds().

also, there large chunk of code duplicated between 2 blocks of code. should move common function can call both places.