CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
wickywills
wickywills

Reputation: 4204

Google maps bounds not working

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>

Upvotes: 3

Views: 3288

Answers (1)

geocodezip
geocodezip

Reputation: 161404

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>

Upvotes: 4

Related Questions