How to center the info box in Google Maps?

Question

Google

There are a lot of markers on the map, when you click on the marker, the zoom is triggered, the opening window moves to the left, how to make it so that it is in the center when zooming?

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//https://maps.googleapis.com/maps/api/js?key=AIzaSyCVQ3pWDCvq9N6hMfZHqFXiu0l_uR0aXLY&sensor=false
googlemapslist.style.visibility='hidden';
    			googlemaps.style.height = '100%';
        googlemaps.style.width = '100%';
var markersArray = [];
var bounds = new google.maps.LatLngBounds();
//var styles = [{ stylers: [{ hue: "#404d75" },{ saturation: -30 }]},{ featureType: "road", elementType: "geometry", stylers: [{ lightness: -10 },] }];
//var styledMap = new google.maps.StyledMapType(styles, {name: "SHARMES"});
var mapOptions = {
  maptype: 'ROADMAP',
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemaps"), mapOptions);
var geocoder = new google.maps.Geocoder();
//map.mapTypes.set('map_style', styledMap);
//map.setMapTypeId('map_style');
var infoWindow = new google.maps.InfoWindow(), marker, i;

function initialize() {
var markers = [];
var innerlist = '';
var markers = [
    
];
document.getElementById('googlemapslist').innerHTML = '';
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1],markers[i][2]);
        if (markers[i][1] == '0' && markers[i][2]== '0') {
            //alert (markers[i][3]);
            //var position = new google.maps.LatLng(markers[i][1],markers[i][2]);
            geocoder.geocode( { 'address': 'markers[i][3]' }, function(results, status) {
                
                if (status == google.maps.GeocoderStatus.OK) {
                    position = results[0].geometry.location;
                    //alert ('ii' + position);
                }
                else {
                   position = new google.maps.LatLng(markers[i][1],markers[i][2]);
              }
            });
        }
        else {
            position = new google.maps.LatLng(markers[i][1],markers[i][2]);
        }
        //alert (position);
        //var position = new google.maps.LatLng(markers[i][1],markers[i][2]);
        bounds.extend(position);
        if (typeof(markers[i][7]) == 'undefined') {
             markers[i][7] = '0';
        }
        marker = new google.maps.Marker({
            position: position,
            center: position,
            map: map,
            title: markers[i][0],
            popup: false,
            animation : google.maps.Animation.DROP,
            ppID: markers[i][5],
          pID:  markers[i][6],
            is_rozn: markers[i][7],
            contacts: markers[i][4],
            address: markers[i][3],
            image: markers[i][8],
            mid: markers[i][9]
        });
        markersArray.push(marker);
        //ВОТ ТУТ ДОБАВЛЯЕТСЯ СТРОКА В СПИСОК
        innerlist = innerlist + '<div class="col1 center"><h3>' + markers[i]["0"] + '</h3><br><p>' + markers[i]["3"] + '</p>Телефон: ' + markers[i]["4"] + ' ' +'</div>';
        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                    
   
                //ВОТ ТУТ ДОБАВЛЯЕТСЯ КОНТЕНТ ИНФООКНА МАРКЕРА
                
            var infoWindowContent = '<center><h1>' + markers[i][0] + '</h1><br><img src="' + markers[i][8] + '" /></center><br>' + markers[i][4] + '<br><p>' + markers[i][3] + '</p>';
            //   map.setZoom(15);                
            //    map.panTo(position);
              //  map.setCenter(position);
                google.maps.event.trigger(map, 'resize');
map.setCenter(position);

                //map.center = position;
                map.setCenter(bounds.getCenter());
                //map.fitBounds(position);
                infoWindow.setContent(infoWindowContent);
                infoWindow.open(map, marker);
                
            }
        })(marker, i));
        
        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }
    google.maps.event.addListener(map, "click", function(){
        infoWindow.close();
        map.fitBounds(bounds);
    });
    google.maps.event.addListener(infoWindow,'closeclick',function(){
        map.fitBounds(bounds);
    });
    document.getElementById('googlemapslist').innerHTML = innerlist;
    showOverlay(25);
}
function showOverlays(pid) {
  if (markersArray) {
    document.getElementById('googlemapslist').innerHTML = '';
    var innerlist = '';
    infoWindow.close();
    
    for ( i = 0; i < markersArray.length; i++ ) {
        if ( (markersArray[i]["pID"]==pid) || (markersArray[i]["ppID"]==pid) ){
            //markersArray[i].setMap(map);
            markersArray[i].setVisible(true);
            //ВОТ ТУТ ДОБАВЛЯЕТСЯ СТРОКА В СПИСОК
            innerlist = innerlist + '<div class="col1 center"><h3>' + markersArray[i]["title"] + '</h3><img src="' + markersArray[i]["image"] + '"/><br><p>' + markersArray[i]["contacts"] + '</p> ' + markersArray[i]["address"] + ' ' + '</div>';
        }
        else {
            //markersArray[i].setMap(null); 
            markersArray[i].setVisible(false);
        }
    }
    document.getElementById('googlemapslist').innerHTML = innerlist;
  }
  map.fitBounds(bounds);
}
function showOverlay(id) {
  if (markersArray) {
    document.getElementById('googlemapslist').innerHTML = '';
    var innerlist = '';
    infoWindow.close();
    
    for ( i = 0; i < markersArray.length; i++ ) {
        if ( markersArray[i]["mid"]==id) {
            //markersArray[i].setMap(map);
            markersArray[i].setVisible(true);
            //ВОТ ТУТ ДОБАВЛЯЕТСЯ СТРОКА В СПИСОК
            innerlist = innerlist + '<div class="col1 center"><h3>' + markersArray[i]["title"] + '</h3><img src="' + markersArray[i]["image"] + '"/><br><p>' + markersArray[i]["contacts"] + '</p> ' + markersArray[i]["address"] + ' ' + '</div>';
            map.setZoom(15);                
            map.panTo(markersArray[i]["position"]);
            map.setCenter(markersArray[i]["position"]);
        }
        else {
            //markersArray[i].setMap(null); 
            markersArray[i].setVisible(false);
        }
    }
    document.getElementById('googlemapslist').innerHTML = innerlist;
  }
  //map.fitBounds(bounds);
}
function showOverlaysRozn(rozn) {
  if (markersArray) {
    infoWindow.close();
    map.fitBounds(bounds);
    document.getElementById('googlemapslist').innerHTML = '';
    var innerlist = '';
    for ( i = 0; i < markersArray.length; i++ ) {
        //alert(markersArray[i]["is_rozn"]);
        if ( markersArray[i]["is_rozn"]==rozn ){
            markersArray[i].setVisible(true);
            //ВОТ ТУТ ДОБАВЛЯЕТСЯ СТРОКА В СПИСОК
            innerlist = innerlist + '<div class="col1 center"><h3>' + markersArray[i]["title"] + '</h3><img src="' + markersArray[i]["image"] + '"/><br><p>' + markersArray[i]["contacts"] + '</p>' + markersArray[i]["address"] + ' ' + '</div>';
        }
        else {
            markersArray[i].setVisible(false);
        }
    }
    document.getElementById('googlemapslist').innerHTML = innerlist;
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

Can you put a map on JSFiddle for demonstration?