agm-map Angular Google Map Limit Panning and Zooming

Question

I am working with Angular 8 with agm-map. I want to define a limit the map area that user can zoom or pan(drag). without any limitations user can pan even beyond the north and south bounds of the map.

Answer 1

There were couple of ways previously handle same problem. One way was listening to boundsChange event and if user has pan beyond the limit simply set boundaries back to the area we want. you can find the more details about boudsChange event in here. But there is a very easy way method for this using in built restriction attribute. restriction is a MapRestriction typed attribute. I just assigned the below value to avoid panning beyond the nort and south boundaries of the map,

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

In same way you can define your restrictions using Longitudes and Latitudes in the map.for more details about restriction attribute visit here.