0

This is most definitely the same question as Reset bounds on Google Maps API v3 which has no answer.

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.

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.

    MYMAP.placeMarkers = function(zipcode) {
            if(markers.length > 0) {
                for(var i=0;i<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='<b>'+name+'</b><br />'+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");
          });
        }
Community
  • 1
  • 1
swasheck
  • 4,650
  • 2
  • 28
  • 56
  • Looking at this answer http://stackoverflow.com/questions/3873195/calling-map-fitbounds-multiple-times-in-google-maps-api-v3-0, I came to realize that my code WAS just extending the bounds of the extant map. I needed to make a new bounds object and then fit the bounds to that. Works like a charm, now. – swasheck Nov 21 '11 at 22:18
  • I just added a solution to the linked question. [Reset bounds on Google Maps API v3](http://stackoverflow.com/questions/6332970/reset-bounds-on-google-maps-api-v3) – Mason240 Aug 20 '13 at 12:57

0 Answers0