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 ?
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