set Google Map zoom automatically from result set

Question

I'm using Google Maps alongside our CMS search tool and I have a collection of store returning successfully in a list and on a Google Map based on the search. What I can't seem to get working though is for the map to automatically set the zoom and fit all returning markers into the map. I've seen a number of other posts about doing similar but all seem to relate to v2 of the maps API. This what I have in an attempt to set the zoom and fit.

var iconBase = '/img/';
var icons = {
  parent: {
    icon: iconBase + 'parent.png'
  },
  child: {
    icon: iconBase + 'child.png'
  }
}
var locations = [
  {exp:low_search:results query="{segment_3}" backspace="1"}
  ["{title}", {latitude}, {longitude}, "{type}", "<p>{street_address}<br> {city}<br> {zip}</p>", "{website}" ],
  {/exp:low_search:results}
];

var map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var markerBounds = new google.maps.LatLngBounds();

var marker, i;

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: locations[i][3] == "Yes" ? '/img/parent.png' : '/img/child.png',
    address: locations[i][4]
  });

markerBounds.extend(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent('<h2>' + locations[i][0] + '</h2>' + this.address + '<p><a href="' + locations[i][5] + '">website</a>');
        infowindow.open(map, marker);
    };
  })(marker, i));
}

map.fitBounds(markerBounds);

Where am I failing here?

To clarify, when I remove the markerbounds and fitbounds, that's when I see a working map. The console seems to be erroring on markerBounds.extend(marker);

Answer 1

Easy to miss. You're giving markerBounds.extend() a marker object, but it actually needs a google.maps.LatLng object. Try this:

var marker, i, markerLatLng;

for (i = 0; i < locations.length; i++) {
    if (locations[i].length > 0) {
        markerLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    } else {
        markerLatLng = new google.maps.LatLng(37.778190, -122.420434);
    }
  marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    icon: locations[i][3] == "Yes" ? '/img/parent.png' : '/img/child.png',
    address: locations[i][4]
  });

  markerBounds.extend(markerLatLng);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent('<h2>' + locations[i][0] + '</h2>' + this.address + '<p><a href="' + locations[i][5] + '">website</a>');
        infowindow.open(map, marker);
    };
  })(marker, i));
}

map.fitBounds(markerBounds);

I've declared a new variable that gets a google.maps.LatLng object assigned to it within the for loop, which then gets passed into the markerBounds.extend() method.