title: Reset Bounds on Google Map v3 API
body: <p>This is most definitely the same question as <a href="https://stackoverflow.com/questions/6332970/reset-bounds-on-google-maps-api-v3">Reset bounds on Google Maps API v3</a> which has no answer.</p>
  
  <p>I want to give a user the opportunity to change the area in which they search. I place markers of locations within the zip code (and "touching" zips). If they want to search a different zip they can enter a new zip code and we repeat the process.</p>
  
  <p>I follow the google-suggested way of removing markers and such, but have not yet figured out how to clear the map bounds and start all over with a new set of bounds. Below is the function that is called with each new zip code entry.</p>
  
  <pre><code>    MYMAP.placeMarkers = function(zipcode) {
              if(markers.length &gt; 0) {
                  for(var i=0;i&lt;markers.length;i++) {
                      markers[i].setMap(null);
                  }                   
                  markers = new Array();
                  var bounds = new google.maps.LatLngBounds();
                  MYMAP.map.fitBounds(bounds);                      
              }
  
            $.post("/locations",{"zip": zipcode}, function (data) {
                data = JSON.parse(data);
                $.each(data, function (key, value) {
                  var name = value.name;
                  var address = value.address;
                  // create a new LatLng point for the marker
                  var lat = value.lat;
                  var lng = value.lon;
                  var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
                  // extend the bounds to include the new point
                  MYMAP.bounds.extend(point);
                  // add the marker itself
                  var marker = new google.maps.Marker({
                      position: point,
                      map: MYMAP.map
                  });
                  // create the tooltip and its text
                  infoBubble = new InfoBubble({
                    shadowStyle: 1,
                    padding: 10,      
                    backgroundColor: 'white',
                    borderRadius: 5,
                    arrowSize: 10,
                    borderWidth: 1,
                    maxWidth: 400,
                    borderColor: '#A85E45',
                    disableAutoPan: false,
                    hideCloseButton: true,
                    arrowPosition: 50,
                    backgroundClassName: 'phoney',
                    disableAutoPan: true,
                    hideCloseButton: false,
                    arrowStyle: 0
                  }); 
                  var html='&lt;b&gt;'+name+'&lt;/b&gt;&lt;br /&gt;'+address;
                  // add a listener to open the tooltip when a user clicks on one of the markers
                  google.maps.event.addListener(marker, 'click', function() {
                      infoBubble.setContent(html);
                      infoBubble.open(MYMAP.map, marker);
                  });
                  markers.push(marker);
                });
                  // Fit the map around the markers we added:
                MYMAP.map.fitBounds(MYMAP.bounds);
                google.maps.event.trigger(map, "resize");
            });
          }
  </code></pre>