Search code examples
ruby-on-railsgoogle-mapsgmaps4rails

setting bounds in gmap on rails using gmap4rails


I am trying to set bounds on my map to only present a certain portion of a city. My current code is:

     var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(42.340, -71.20), 
     new google.maps.LatLng(42.370, -71.0)
   );

var mapOptions = 
{
    maxZoom:19,
    minZoom:15,
};

handler = Gmaps.build('Google', {markers: { maxRandomDistance: null} });
handler.buildMap({ provider: mapOptions, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
  handler.getMap().setCenter(new google.maps.LatLng(42.359, -71.090413));
});

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

However the bounds does not work at all and the user can go anywhere on the map. Any ideas what am I doing wrong ?


Solution

  • order of stuff in your script seems really weird, do:

    var southWest = new google.maps.LatLng( 42.340, -71.20 );
    var northEast = new google.maps.LatLng( 42.370, -71.0 );
    var hyderabadBounds = new google.maps.LatLngBounds( southWest, northEast );
    var mapOptions = 
    {
        maxZoom:19,
        minZoom:15,
        bounds: hyderabadBounds
    };
    
    handler = Gmaps.build('Google', {markers: { maxRandomDistance: null} });
    handler.buildMap({ provider: mapOptions, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers(<%=raw @hash.to_json %>);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.getMap().setCenter(new google.maps.LatLng(42.359, -71.090413));
    });
    

    Btw, there is no bounds option in google maps, see doc