javascript - Google maps fitBounds zoom not changing

Question

I have a google map script but due to the fitBounds function I can not change the initial zoom. Someone can help me already tried to modify the script and even force the zoom but it does not work.

jQuery(function($) {
                // Asynchronously Load the map API 
                var script = document.createElement('script');
                script.src = "//maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
                document.body.appendChild(script);
            });

            function initialize() {
                var map;
                var bounds = new google.maps.LatLngBounds();
                var mapOptions = {
                    mapTypeId: 'roadmap',  
                    zoom: 14,                  
                    styles: [
    {
        "featureType": "all",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#cecfc4"
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "gamma": 0.01
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "saturation": -31
            },
            {
                "lightness": -33
            },
            {
                "weight": 2
            },
            {
                "gamma": 0.8
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.locality",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.neighborhood",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "off"
            },
            {
                "color": "#ff0000"
            }
        ]
    },
    {
        "featureType": "administrative.neighborhood",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#666766"
            }
        ]
    },
    {
        "featureType": "administrative.neighborhood",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            },
            {
                "color": "#ff0000"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            {
                "lightness": 30
            },
            {
                "saturation": 30
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "landscape.man_made",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#f7f5ee"
            }
        ]
    },
    {
        "featureType": "landscape.natural.landcover",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#f7f5ee"
            }
        ]
    },
    {
        "featureType": "landscape.natural.terrain",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#f7f5ee"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "saturation": 20
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [
            {
                "lightness": 20
            },
            {
                "saturation": -20
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#d1cabc"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": [
            {
                "lightness": 10
            },
            {
                "saturation": -30
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#cec3bc"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "saturation": 25
            },
            {
                "lightness": 25
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#d1cabc"
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "off"
            },
            {
                "color": "#ff0000"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#ff0000"
            }
        ]
    },
    {
        "featureType": "road.highway.controlled_access",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#666766"
            }
        ]
    },
    {
        "featureType": "road.highway.controlled_access",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#666766"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#d1cabc"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "off"
            },
            {
                "color": "#ff0000"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#666766"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            },
            {
                "color": "#999897"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "lightness": -20
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#d1cabc"
            }
        ]
    }
]

                };
                                
                // Display a map on the page
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
               
                    
                // Multiple Markers
                var markers = [
                    ['UNDERDOG', -23.5606035,-46.6798997],
                    ['BRAZ ELETTRICA', -23.5644743,-46.6825759],
                    ['CHOPERIA S?O PAULO', -23.5650709,-46.6833805],
                    ['MEATS', -23.564903,-46.6832477],
                    ['HOUSE OF ALL', -23.5651321,-46.6847573],
                ];
                                    
                // Info Window Content
                var infoWindowContent = [
                    ['<h4 style="color:#000">UNDERDOG</h4>' +
                    '<img src="images/bd01.jpg" class="img-responsive"><br><strong>R. Jo?o Moura, 541 – Pinheiros</strong><br>O Underdog é um pequeno bar que serve carnes preparadas na parrilla, o estilo tradicional do churrasco argentino e uruguaio. Além disso, tem várias op??es de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'],
                    ['<h4 style="color:#000">BRAZ ELETTRICA</h4>' +
                    '<img src="images/bd02.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 220 - Pinheiros</strong><br>A Braz Elettrica é a irm? hiperativa da Braz. Inaugurada a menos de um ano em Pinheiros  é sucesso absoluto entre os amantes de uma bela redonda acompanhada de uma boa cerveja. E  agora você já pode combinar as op??es da Goose Island, incluindo a cerveja especial de aniversário, a 30th com a sua pizza predileta.'],
                    ['<h4 style="color:#000">CHOPERIA S?O PAULO</h4>' +
                    '<img src="images/bd03.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 315 – Pinheiros</strong><br>Na Choperia S?o Paulo a cada semana s?o engatados 20 tipos diferentes às torneiras de chopes inclusive as várias op??es de Goose Island, sendo uma delas a cerveja especial de aniversário, a 30th.'],
                    ['<h4 style="color:#000">MEATS</h4>' +
                    '<img src="images/bd04.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 320 - Pinheiros</strong><br>Sob o comando de Paulo Yoller, o Meats oferece um menu inventivo com grande respeito aos clássicos, na duvida do que pedir, vá de Cheese burger com bacon extra. Além disso, tem várias op??es de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'],
                    ['<h4 style="color:#000">HOUSE OF ALL</h4>' +
                    '<img src="images/bd05.jpg" class="img-responsive"><br><strong>R. Dr. Virgílio de Carvalho Pinto, 47 - Pinheiros</strong><br>O House of All é mais do que uma casa. é onde criam-se experiências únicas para engajar a comunidade em volta de novas marcas e costumes locais, n?o é difícil ver a rua do House of All fechada com muita divers?o e coletividade. Além disso, tem várias op??es de Goose Island, i

Answer 1

1. remove the call to map.fitBounds:

// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);

2. call map.setCenter instead (or just set the center you want when you initialize the map variable, both a center and a zoom are required; calling fitbounds sets both):

map.setCenter(bounds.getCenter());

proof of concept fiddle

code snippet:

jQuery(function($) {
  // Asynchronously Load the map API 
  var script = document.createElement('script');
  script.src = "//maps.googleapis.com/maps/api/js?callback=initialize";
  document.body.appendChild(script);
});

function initialize() {
  var map;
  var bounds = new google.maps.LatLngBounds();
  var mapOptions = {
    mapTypeId: 'roadmap',
    zoom: 14,
    styles: mapstyles
  };

  // Display a map on the page
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


  // Multiple Markers
  var markers = [
    ['UNDERDOG', -23.5606035, -46.6798997],
    ['BRAZ ELETTRICA', -23.5644743, -46.6825759],
    ['CHOPERIA S?O PAULO', -23.5650709, -46.6833805],
    ['MEATS', -23.564903, -46.6832477],
    ['HOUSE OF ALL', -23.5651321, -46.6847573],
  ];

  // Info Window Content
  var infoWindowContent = [
    ['<h4 style="color:#000">UNDERDOG</h4>' +
      '<img src="images/bd01.jpg" class="img-responsive"><br><strong>R. Jo?o Moura, 541 – Pinheiros</strong><br>O Underdog é um pequeno bar que serve carnes preparadas na parrilla, o estilo tradicional do churrasco argentino e uruguaio. Além disso, tem várias op??es de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'
    ],
    ['<h4 style="color:#000">BRAZ ELETTRICA</h4>' +
      '<img src="images/bd02.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 220 - Pinheiros</strong><br>A Braz Elettrica é a irm? hiperativa da Braz. Inaugurada a menos de um ano em Pinheiros  é sucesso absoluto entre os amantes de uma bela redonda acompanhada de uma boa cerveja. E  agora você já pode combinar as op??es da Goose Island, incluindo a cerveja especial de aniversário, a 30th com a sua pizza predileta.'
    ],
    ['<h4 style="color:#000">CHOPERIA S?O PAULO</h4>' +
      '<img src="images/bd03.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 315 – Pinheiros</strong><br>Na Choperia S?o Paulo a cada semana s?o engatados 20 tipos diferentes às torneiras de chopes inclusive as várias op??es de Goose Island, sendo uma delas a cerveja especial de aniversário, a 30th.'
    ],
    ['<h4 style="color:#000">MEATS</h4>' +
      '<img src="images/bd04.jpg" class="img-responsive"><br><strong>R. dos Pinheiros, 320 - Pinheiros</strong><br>Sob o comando de Paulo Yoller, o Meats oferece um menu inventivo com grande respeito aos clássicos, na duvida do que pedir, vá de Cheese burger com bacon extra. Além disso, tem várias op??es de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'
    ],
    ['<h4 style="color:#000">HOUSE OF ALL</h4>' +
      '<img src="images/bd05.jpg" class="img-responsive"><br><strong>R. Dr. Virgílio de Carvalho Pinto, 47 - Pinheiros</strong><br>O House of All é mais do que uma casa. é onde criam-se experiências únicas para engajar a comunidade em volta de novas marcas e costumes locais, n?o é difícil ver a rua do House of All fechada com muita divers?o e coletividade. Além disso, tem várias op??es de Goose Island, incluindo a cerveja especial de aniversário, a 30th.'
    ],

  ];

  // Display multiple markers on a map
  var infoWindow = new google.maps.InfoWindow({
      maxWidth: 450
    }),
    marker, i;

  // 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][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: markers[i][0],
      icon: 'https://www.redrose.com.br/goose/images/marker.png'
    });

    // 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.open(map, marker);
      }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    // map.fitBounds(bounds);
    map.setCenter(bounds.getCenter());
  }
  google.maps.event.addListener(map, 'zoom_changed', function() {
    document.getElementById('zoom').innerHTML = "zoom=" + map.getZoom();
  })
  // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
  var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(10);
    google.maps.event.removeListener(boundsListener);
  });
}
var mapstyles = [{
    "featureType": "all",
    "elementType": "geometry",
    "stylers": [{
      "color": "#cecfc4"
    }]
  },
  {
    "featureType": "all",
    "elementType": "labels.text.fill",
    "stylers": [{
        "gamma": 0.01
      },
      {
        "lightness": 20
      }
    ]
  },
  {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [{
        "saturation": -31
      },
      {
        "lightness": -33
      },
      {
        "weight": 2
      },
      {
        "gamma": 0.8
      }
    ]
  },
  {
    "featureType": "all",
    "elementType": "labels.icon",
    "stylers": [{
      "visibility": "off"
    }]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "off"
    }]
  },
  {
    "featureType": "administrative.neighborhood",
    "elementType": "geometry.stroke",
    "stylers": [{
        "visibility": "off"
      },
      {
        "color": "#ff0000"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "elementType": "labels.text.fill",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#666766"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "elementType": "labels.text.stroke",
    "stylers": [{
        "visibility": "off"
      },
      {
        "color": "#ff0000"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [{
        "lightness": 30
      },
      {
        "saturation": 30
      },
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "geometry.fill",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#f7f5ee"
      }
    ]
  },
  {
    "featureType": "landscape.natural.landcover",
    "elementType": "geometry.fill",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#f7f5ee"
      }
    ]
  },
  {
    "featureType": "landscape.natural.terrain",
    "elementType": "geometry.fill",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#f7f5ee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [{
      "saturation": 20
    }]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [{
        "lightness": 20
      },
      {
        "saturation": -20
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry.fill",
    "stylers": [{
      "color": "#d1cabc"
    }]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{
        "lightness": 10
      },
      {
        "saturation": -30
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#cec3bc"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": [{
        "saturation": 25
      },
      {
        "lightness": 25
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [{
        "color": "#d1cabc"
      },
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [{
        "visibility": "off"
      },
      {
        "color": "#ff0000"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.stroke",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#ff0000"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "labels.text.fill",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#666766"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "off"
    }]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [{
      "color": "#666766"
    }]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.stroke",
    "stylers": [{
      "visibility": "off"
    }]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#d1cabc"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [{
        "visibility": "off"
      },
      {
        "color": "#ff0000"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#666766"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.stroke",
    "stylers": [{
        "visibility": "off"
      },
      {
        "color": "#999897"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "all",
    "stylers": [{
      "lightness": -20
    }]
  },
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [{
        "visibility": "on"
      },
      {
        "color": "#d1cabc"
      }
    ]
  }
]

html,
body,
#map_canvas {
  height: 95%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<div id="zoom"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map_canvas" class="mapping"></div>