7

I'm trying to recreate the pan limit behavior as demonstrated here: http://econym.org.uk/gmap/example_range.htm

Unfortunately, it's using the API version 2, instead of the current version 3. I'm updating the commands so that they are current, but I think I might have missed something because it's not working:

<html> 
<body> 
<script type="text/javascript" src="http://meyouand.us/scripts/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
$(document).ready(function() {

// Generate map
var latlng = new google.maps.LatLng(37.76201, -122.4375);
var myOptions = { zoom: 12, center: latlng, panControl: false, zoomControl: true, mapTypeControl: false, streetViewControl: false, scrollwheel: true, draggable: true, mapTypeId: google.maps.MapTypeId.TERRAIN };
var map = new google.maps.Map(document.getElementById("gmap"), myOptions);

// Limit panning

// The allowed region which the whole map must be within
var southWest = new google.maps.LatLng(37.684, -122.591);
var northEast = new google.maps.LatLng(37.836, -122.333);
var allowedBounds = new google.maps.LatLngBounds(southWest, northEast);

// Double check boundaries, plot points just in case
var sW = new google.maps.Marker({
    position: southWest, 
    map: map,
    title: "southWest"
});
var nE = new google.maps.Marker({
    position: northEast, 
    map: map,
    title: "northEast"
});

// Add a move listener to restrict the bounds range
google.maps.event.addListener(map, "dragend", function() { checkBounds(); });


// If the map position is out of range, move it back
function checkBounds() {
  // Perform the check and return if OK
  if (allowedBounds.contains(map.getCenter())) {
    return;
  }

  // It's not OK, so find the nearest allowed point and move there
  var C = map.getCenter();
  var X = C.lng();
  var Y = C.lat();

  var AmaxX = allowedBounds.getNorthEast().lng();
  var AmaxY = allowedBounds.getNorthEast().lat();
  var AminX = allowedBounds.getSouthWest().lng();
  var AminY = allowedBounds.getSouthWest().lat();

  if (X < AminX) {X = AminX; alert('hi') }
  if (X > AmaxX) {X = AmaxX; alert('hi') }
  if (Y < AminY) {Y = AminY; alert('hi') }
  if (Y > AmaxY) {Y = AmaxY; alert('hi') }
  alert ("Restricting "+Y+" "+X);
  map.setCenter(new LatLng(Y,X));
}

});
</script> 
<body> 

<div id="gmap" style="width: 480px; height: 440px;"></div>

</body> 
</html>

Would someone mind lending another set of eyes to see if I missed something? :D

(There is another up-to-date version 3 code here on StackOverflow called 'How do I limit panning in Google maps API V3?' However that behavior visually "snaps" back rather than simply limiting the movement beyond the boundaries.)

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
Marc P
  • 606
  • 1
  • 11
  • 26

2 Answers2

2

Use example from this post: Google Maps v3 - limit viewable area and zoom level and change map listener event from dragend to drag. I've just tested it and it works as expected.

EDIT: Example at js fiddle

Community
  • 1
  • 1
WojtekT
  • 4,735
  • 25
  • 37
0

There is attribute in agm-map named restriction. restriction is MapRestriction Type. you can find the api doc for this attribute here. as said in the doc restriction attribute restricts panning and zooming beyond the limit we define. here is an example. 

restriction: {
    latLngBounds:{
      north: 85.0, 
      south: -85.0, 
      west: -180.0, 
      east: 180.0
    },
    strictBounds : true
  }

I was working with angular. It was easy to pass this object to limit the panning.

Rashmi Prbhath
  • 117
  • 7
  • How to include this maps with latitude and longitude? I have defined latitude and longitude instead of `north`... etc. And I have bind the value using `[restriction]="restriction"` it didn't work – Sai Manoj Jun 15 '20 at 11:40