Google maps bounds not working

Question

I am currently trying to set the bounds of a custom Google map so that the user cannot zoom out too far (to the point where the world map starts to tile horizontally), and cannot drag too far vertically to avoid this issue.

I've added code to set the bounds, however I no longer seem to be able to drag at all (uncomment bounds code to recreate). Basically I just want the bounds to be the world map to avoid the issue in the screenshot above. Anything obvious I've missed?

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #map_canvas { width: 100%; height: 650px; } // #map </style> </head> <body> <div id="map_canvas"></div> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function CoordMapType(tileSize) { this.tileSize = tileSize; } CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.backgroundImage = 'url(http://www.transparenttextures.com/patterns/dark-denim-3.png)'; return div; }; var map; var mullem = new google.maps.LatLng(50.3873733,7.4952241); function initialize() { var latlng = new google.maps.LatLng(50.3873733,7.4952241); var myOptions = { disableDefaultUI: true, zoom: 2 }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var myLatLng = new google.maps.LatLng(50.3869012, 7.4950149); var marker = new google.maps.Marker({ position: new google.maps.LatLng(40.6700, -73.9400), map: map, icon: 'images/map-marker.png', zIndex: 999999 }); map.setCenter(new google.maps.LatLng(51.508742,-0.120850)); // MAP BOUNDS /*var allowedBounds = new google.maps.LatLngBounds( new google.maps.LatLng(83.829945, 160.839844), new google.maps.LatLng(-72.711903, -165.058594) ); var lastValidCenter = map.getCenter(); google.maps.event.addListener(map, 'center_changed', function() { if (allowedBounds.contains(map.getCenter())) { // still within valid bounds, so save the last valid position lastValidCenter = map.getCenter(); return; } // not valid anymore => return to last valid position map.panTo(lastValidCenter); });*/ // MAP BOUNDS - END map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256))); } google.maps.event.addDomListener(window, 'load', initialize); </script> </body> </html>

Answer 1

from the documentation :

LatLngBounds(sw?:LatLng|LatLngLiteral, ne?:LatLng|LatLngLiteral) Constructs a rectangle from the points at its south-west and north-east corners.

Your bounds are backwards:

var allowedBounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(83.829945, 160.839844),  // NE
         new google.maps.LatLng(-72.711903, -165.058594) // SW
);

should be:

var allowedBounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(-72.711903, -165.058594), // SW
         new google.maps.LatLng(83.829945, 160.839844)    // NE
);

proof of concept fiddle

code snippet:

 function CoordMapType(tileSize) { this.tileSize = tileSize; } CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.backgroundImage = 'url(http://www.transparenttextures.com/patterns/dark-denim-3.png)'; return div; }; var map; var mullem = new google.maps.LatLng(50.3873733, 7.4952241); function initialize() { var latlng = new google.maps.LatLng(50.3873733, 7.4952241); var myOptions = { disableDefaultUI: true, zoom: 2 }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var myLatLng = new google.maps.LatLng(50.3869012, 7.4950149); var marker = new google.maps.Marker({ position: new google.maps.LatLng(40.6700, -73.9400), map: map, icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png', zIndex: 999999 }); map.setCenter(new google.maps.LatLng(51.508742, -0.120850)); // MAP BOUNDS // LatLngBounds(sw?:LatLng|LatLngLiteral, ne?:LatLng|LatLngLiteral) Constructs a rectangle from the points at its south-west and north-east corners. var allowedBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-72.711903, -165.058594), // SW new google.maps.LatLng(73.829945, 160.839844) // NE ); var lastValidCenter = map.getCenter(); google.maps.event.addListener(map, 'center_changed', function() { if (allowedBounds.contains(map.getCenter())) { // still within valid bounds, so save the last valid position lastValidCenter = map.getCenter(); return; } // not valid anymore => return to last valid position map.panTo(lastValidCenter); }); // MAP BOUNDS - END map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256))); } google.maps.event.addDomListener(window, 'load', initialize);

 html, body, #map_canvas { width: 100%; height: 100%; } // #map

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas"></div>

Google maps bounds not working

Question

1 answers

solution1
3 ACCPTED 2016-03-17 13:46:29

Google maps bounds not working

Question

1 answers

solution1 3 ACCPTED 2016-03-17 13:46:29

solution1
3 ACCPTED 2016-03-17 13:46:29