Trying to get google maps to zoom and center, can't get my head round it

Question

I've got a piece of code here that plots a group of paths on a map. I'm trying to get the map to zoom and centre so all the paths are visible, but I can't get anything to work. Here's what the code looks like before I started:

var points = new Array();
var pointsData = [];
var pointsData = $('#master-' + r + ' > #route-data').html();
if (pointsData != '')
{
    var pointsArray = JSON.parse(pointsData);
    for (var p=0; p<pointsArray.length; p++) {
        points.push(new google.maps.LatLng(pointsArray[p][0], pointsArray[p][1]));
    }
    $.OverMap.drawRoute(points);
}
else $.OverMap.drawDirections({preserveViewport:false});

And after fiddling with it:

map = this.map.map;

map.fitBounds(this.map.bounds);
zoomChangeBoundsListener = 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        if (this.getZoom()){
            this.setZoom(16);
        }
});
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);

// Draw route
var bounds = new google.maps.LatLngBounds();
var points = new Array();
var pointsData = [];
var pointsData = $('#master-' + r + ' > #route-data').html();
if (pointsData != '')
{
    var pointsArray = JSON.parse(pointsData);
    for (var p=0; p<pointsArray.length; p++) {
        points.push(new google.maps.LatLng(pointsArray[p][0], pointsArray[p][1]));
        bounds.extend(pointsArray[p][0], pointsArray[p][1]);
    }
    $.OverMap.drawRoute(points);
}
else $.OverMap.drawDirections({preserveViewport:false});

Can anyone point out where I'm going wrong?

Answer 1

the google.maps.LatLngBounds.extend takes a google.maps.LatLng object as an argument.

not:

for (var p=0; p<pointsArray.length; p++) {
    points.push(new google.maps.LatLng(pointsArray[p][0], pointsArray[p][1]));
    bounds.extend(pointsArray[p][0], pointsArray[p][1]);
}

instead do:

for (var p=0; p<pointsArray.length; p++) {
    var pt = new google.maps.LatLng(pointsArray[p][0], pointsArray[p][1]);
    points.push(pt);
    bounds.extend(pt);
}