Google maps API V3 method fitBounds() using Prototypejs

Question

I have a div as follows to display a google map:

#map {
   width: 300px;
   height: 300px;
   border: 1px solid #DDD;
}

<div id="map"></div>

I want to display the map with a zoom level that fits the bounds of the above viewport.

When I code as follows it works fine:

    var geocoder = new google.maps.Geocoder();
    var map = new google.maps.Map($('#map')[0], {zoom: 10});

    geocoder.geocode({ 'address': generatedAddress }, function (results, status) {
        if (status == 'OK') {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                if (results[0].geometry.viewport)
                    map.fitBounds(results[0].geometry.viewport);

      } else {
          alert('Geocode was not successful for the following reason: ' + status);
      }
   }); 

When I use typeahead-addresspicker.js to generate the map it zooms in too far?

I've narrowed it down to the following code. When you call the AddressPicker.prototype.updateMap function the boundsForLocation option on AddressPicker.prototype.initMap function should return this.map.fitBounds(response.geometry.viewport); When I debug I can see that it is hitting the following code inside the AddressPicker.prototype.updateBoundsForPlace function as expected:

if (response.geometry.viewport) {
  console.log('test');
  return this.map.fitBounds(response.geometry.viewport);
}

What I don't understand is how it gets wired back to the google.maps.Map - I'm not familiar with ptototypejs? So basically running through it, we initilize the map by calling initMap, then we call the updateMap function. Inside updateMap function we are calling the following snippet of code:

if (_this.map) {
            if ((_ref = _this.mapOptions) != null) {
              _ref.boundsForLocation(response);
            }
   }

which is suppose to set the bounds by calling the updateBoundsForPlace but the google maps options doesnt expose any property called boundsForLocation?

AddressPicker.prototype.initMap = function() {
    var markerOptions, _ref, _ref1;
    if ((_ref = this.options) != null ? (_ref1 = _ref.map) != null ? _ref1.gmap : void 0 : void 0) {
      this.map = this.options.map.gmap;
    } else {
      this.mapOptions = $.extend({
        zoom: 3,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        boundsForLocation: this.updateBoundsForPlace
      }, this.options.map);
      this.map = new google.maps.Map($(this.mapOptions.id)[0], this.mapOptions);
    }
    this.lastResult = null;
    markerOptions = $.extend({
      draggable: true,
      visible: false,
      position: this.map.getCenter(),
      map: this.map
    }, this.options.marker || {});
    this.marker = new google.maps.Marker(markerOptions);
    if (markerOptions.draggable) {
      return google.maps.event.addListener(this.marker, 'dragend', this.markerDragged);
    }
  };


  AddressPicker.prototype.updateMap = function(event, place) {
    if (this.options.placeDetails) {
      return this.placeService.getDetails(place, (function(_this) {
        return function(response) {
          var _ref;
          _this.lastResult = new AddressPickerResult(response);
          if (_this.marker) {
            _this.marker.setPosition(response.geometry.location);
            _this.marker.setVisible(true);
          }
          if (_this.map) {
            if ((_ref = _this.mapOptions) != null) {
              _ref.boundsForLocation(response);
            }
          }
          return $(_this).trigger('addresspicker:selected', _this.lastResult);
        };
      })(this));
    } else {
      return $(this).trigger('addresspicker:selected', place);
    }
  };

  AddressPicker.prototype.updateBoundsForPlace = function(response) {
    if (response.geometry.viewport) {
      return this.map.fitBounds(response.geometry.viewport);
    } else {
      this.map.setCenter(response.geometry.location);
      return this.map.setZoom(this.options.zoomForLocation);
    }
  };

Answer 1

Managed to fix by commenting out the following lines:

//if (response.geometry.viewport) {
//  return this.map.fitBounds(response.geometry.viewport);
//} else {
  this.map.setCenter(response.geometry.location);
  return this.map.setZoom(this.options.zoomForLocation);
//}