tomwoods/google_maps_fitBounds_issue.html

## google_maps_fitBounds_issue.html
<!DOCTYPE html>
<html>
    <head>
        <title>Google Maps JavaScript API v3 Example: Map Simple</title>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map_canvas {
                margin: 0;
                padding: 0;
                height: 100%;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script>
            window.map;
            function initialize() {
                var mapOptions = {
                    minZoom:11,
                    maxZoom:16,
                    zoom: 14,
                    center: new google.maps.LatLng(42.23113690876814, -71.36785550000002),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                window.map = new google.maps.Map(document.getElementById('map_canvas'),
                mapOptions);
                getBounds(window.map)
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
        <script>
            getBounds = function(){
                markerList = [{"Za":42.351154,"$a":-71.058922},{"Za":42.358242,"$a":-71.06192799999997},{"Za":42.341423,"$a":-71.24584199999998},{"Za":42.350166,"$a":-71.21668999999997},{"Za":42.358173,"$a":-71.054146},{"Za":42.351646,"$a":-71.06379700000002},{"Za":42.362247,"$a":-71.08824900000002},{"Za":42.353767,"$a":-71.058243},{"Za":42.276501,"$a":-71.41706099999999},{"Za":42.267246,"$a":-71.52365900000001},{"Za":42.26165,"$a":-71.47859199999999},{"Za":42.26915,"$a":-71.65177900000003},{"Za":41.941738,"$a":-71.28481299999999},{"Za":42.246761,"$a":-71.68444099999999},{"Za":42.361488,"$a":-71.261078},{"Za":42.353256,"$a":-71.06314800000001},{"Za":42.356403,"$a":-71.051895},{"Za":42.348186,"$a":-71.07403599999998},{"Za":42.347,"$a":-71.08799699999997},{"Za":42.353569,"$a":-71.067947},{"Za":42.348297,"$a":-71.083099},{"Za":42.363953,"$a":-71.18687399999999},{"Za":42.35482,"$a":-71.06220200000001},{"Za":42.350971,"$a":-71.07086900000002},{"Za":42.373287,"$a":-71.12293199999999},{"Za":42.333084,"$a":-71.10527000000002},{"Za":42.353256,"$a":-71.05297100000001},{"Za":42.366547,"$a":-71.05126999999999},{"Za":42.367653,"$a":-71.06542999999999},{"Za":42.275284,"$a":-71.169151},{"Za":42.272182,"$a":-71.06232499999999},{"Za":42.519215,"$a":-71.50225799999998},{"Za":42.354706,"$a":-71.056374}];

                //extending 23 doesn't really work
                bounds = new google.maps.LatLngBounds ();
                for (var i = 0; i < markerList.length; i++) {
                    pos = new google.maps.LatLng (markerList[i]["Za"],markerList[i]["$a"])
                    bounds.extend(pos);
                }
                window.map.fitBounds(bounds);


                //wait 5 seconds and this time, lets only extend 5
                setTimeout(function(){
                    console.log('now we are going to load only 5 and it will actually expand!');
                    bounds2 = new google.maps.LatLngBounds ();
                    for (var i = 0; i < 5; i++) {
                        pos = new google.maps.LatLng (markerList[i]["Za"],markerList[i]["$a"])
                        bounds2.extend(pos);
                    }
                    window.map.fitBounds (bounds2);
                },5000)
            }

        </script>
    </head>
    <body>
        <div id="map_canvas" style="width:450px;height:600px;"></div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Google Maps JavaScript API v3 Example: Map Simple</title>
	<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	html, body, #map_canvas {
	margin: 0;
	padding: 0;
	height: 100%;
	}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script>
	window.map;
	function initialize() {
	var mapOptions = {
	minZoom:11,
	maxZoom:16,
	zoom: 14,
	center: new google.maps.LatLng(42.23113690876814, -71.36785550000002),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	window.map = new google.maps.Map(document.getElementById('map_canvas'),
	mapOptions);
	getBounds(window.map)
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	<script>
	getBounds = function(){
	markerList = [{"Za":42.351154,"$a":-71.058922},{"Za":42.358242,"$a":-71.06192799999997},{"Za":42.341423,"$a":-71.24584199999998},{"Za":42.350166,"$a":-71.21668999999997},{"Za":42.358173,"$a":-71.054146},{"Za":42.351646,"$a":-71.06379700000002},{"Za":42.362247,"$a":-71.08824900000002},{"Za":42.353767,"$a":-71.058243},{"Za":42.276501,"$a":-71.41706099999999},{"Za":42.267246,"$a":-71.52365900000001},{"Za":42.26165,"$a":-71.47859199999999},{"Za":42.26915,"$a":-71.65177900000003},{"Za":41.941738,"$a":-71.28481299999999},{"Za":42.246761,"$a":-71.68444099999999},{"Za":42.361488,"$a":-71.261078},{"Za":42.353256,"$a":-71.06314800000001},{"Za":42.356403,"$a":-71.051895},{"Za":42.348186,"$a":-71.07403599999998},{"Za":42.347,"$a":-71.08799699999997},{"Za":42.353569,"$a":-71.067947},{"Za":42.348297,"$a":-71.083099},{"Za":42.363953,"$a":-71.18687399999999},{"Za":42.35482,"$a":-71.06220200000001},{"Za":42.350971,"$a":-71.07086900000002},{"Za":42.373287,"$a":-71.12293199999999},{"Za":42.333084,"$a":-71.10527000000002},{"Za":42.353256,"$a":-71.05297100000001},{"Za":42.366547,"$a":-71.05126999999999},{"Za":42.367653,"$a":-71.06542999999999},{"Za":42.275284,"$a":-71.169151},{"Za":42.272182,"$a":-71.06232499999999},{"Za":42.519215,"$a":-71.50225799999998},{"Za":42.354706,"$a":-71.056374}];

	//extending 23 doesn't really work
	bounds = new google.maps.LatLngBounds ();
	for (var i = 0; i < markerList.length; i++) {
	pos = new google.maps.LatLng (markerList[i]["Za"],markerList[i]["$a"])
	bounds.extend(pos);
	}
	window.map.fitBounds(bounds);



	//wait 5 seconds and this time, lets only extend 5
	setTimeout(function(){
	console.log('now we are going to load only 5 and it will actually expand!');
	bounds2 = new google.maps.LatLngBounds ();
	for (var i = 0; i < 5; i++) {
	pos = new google.maps.LatLng (markerList[i]["Za"],markerList[i]["$a"])
	bounds2.extend(pos);
	}
	window.map.fitBounds (bounds2);
	},5000)
	}

	</script>
	</head>
	<body>
	<div id="map_canvas" style="width:450px;height:600px;"></div>
	</body>
	</html>