0

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 ?

Quantico
  • 2,398
  • 7
  • 35
  • 59

1 Answers1

1

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

apneadiving
  • 114,565
  • 26
  • 219
  • 213
  • a) the problem is the user can move, the bounds are not working b) what else seems weird ? – Quantico Nov 17 '13 at 15:26
  • a) just realized your so called `bounds` options do not exist in google maps: https://developers.google.com/maps/documentation/javascript/reference#MapOptions – apneadiving Nov 17 '13 at 15:29
  • b) you put `hyderabadBounds` in your options but `hyderabadBounds` is not yet defined – apneadiving Nov 17 '13 at 15:30
  • if you want to go somewhere precise, you'd rather remove `handler.fitMapToBounds();` – apneadiving Nov 17 '13 at 15:40
  • I don't want to go somewhere precise. I want to limit my users to leave a certain area.As in they can only see Boston on the map and if they try to go out of the bounds of boston they won't be able to do so – Quantico Nov 17 '13 at 15:43
  • http://stackoverflow.com/questions/3818016/google-maps-v3-limit-viewable-area-and-zoom-level – apneadiving Nov 17 '13 at 15:45
  • what is `map` here? `google.maps.event.addListener(map,`, you have everything you need to solve your issue in my answer, just think now – apneadiving Nov 17 '13 at 16:06