Jquery – Google Maps API V3 fitbounds() zooms out but never in

fitboundsgoogle mapsgoogle-maps-api-3jquery

I've created a quite complex store locator of sorts. The user enters their zip and a table returns results with corresponding markers on a map. They can page through results and the markers move further and further out and the fitbounds() function works great for zoom out to the appropriate zoom level to fit the markers. The problem is that if you page back to closer locations the fitbounds() doesn't zoom in. Even if you enter a new search it doesn't zoom in around those new markers — it centers over them but stays at whatever zoom level it was at previously. I hope this makes sense. If anyone knows what I need to add to get it to zoom back in on closer results please help. These are the google functions that I'm call at the end of my marker pushing function:

  map.setCenter(bounds.getCenter());
  map.panToBounds(bounds);
  map.fitBounds(bounds);

Thanks!

Best Answer

Nothing fancy needed here. First fit bounds then pan to it. This will give you the proper zoom and contain the entire bounds.

map.fitBounds(bounds);
map.panToBounds(bounds);

Related Solutions

Javascript – Google Maps API v3: How to remove all markers

Simply do the following:

I. Declare a global variable:

var markersArray = [];

II. Define a function:

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. Push markers in the 'markerArray' before calling the following:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Call the clearOverlays(); or map.clearOverlays(); function wherever required.

That's it!!

Jquery – How to disable mouse scroll wheel scaling with Google Maps API

In version 3 of the Maps API you can simply set the scrollwheel option to false within the MapOptions properties:

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

If you were using version 2 of the Maps API you would have had to use the disableScrollWheelZoom() API call as follows:

map.disableScrollWheelZoom();

The scrollwheel zooming is enabled by default in version 3 of the Maps API, but in version 2 it is disabled unless explicitly enabled with the enableScrollWheelZoom() API call.

Best Answer

Related Solutions

Javascript – Google Maps API v3: How to remove all markers

Jquery – How to disable mouse scroll wheel scaling with Google Maps API

Related Topic