Setting zoom level doesn't work on Google Map

I'm learning web developing and I'm using JavaScript to show Google Map. Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Google Map</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function loadData(callback) {
            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 && xobj.status == "200")
                    callback(xobj.responseText);
            }
            xobj.open("GET", "data.json", true);
            xobj.send(null);
        }

        window.onload = function () {
            loadData(function(response) {
                markers = JSON.parse(response);

            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            for (var i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.title + "</div>");
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);
            }
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
            });
        }
    </script>
    <style>
    /* style settings for Google map */
    #map-canvas {
        width : 1200px; /* map width */
        height: 600px;  /* map height */
    }
    </style>
</head>
<body> 
    <!-- Dislay Google map here -->
    <div id='map-canvas' ></div>
</body>
</html>

I'm trying to change the zoom level, but it doesn't work. I tried to set, for example, 6 or 8 but it doesn't change. What could be the reason?

Solution

The .fitBounds method resets the viewport and thus your zoom level is not taken in account. Here is a minimal working example: https://jsfiddle.net/pdnsown1/1/.

If you comment the line containing the call to .fitBounds and change the zoom level, you will see that it is actually applied. However, if you leave that line uncommented, the zoom level will not be taken in account.

(See https://developers.google.com/maps/documentation/javascript/reference#Map)

EDIT: To limit the map position to given bounds, you have to listen to the drag event and reset the position within the bounds whenever the user drags outside of them (see https://stackoverflow.com/a/9103195/3452708).

I updated the fiddle to show you how: https://jsfiddle.net/pdnsown1/2/.