How to put restriction in zooming ?

[gkumar9]

I want to put zooming restriction. like this : https://developers.google.com/maps/documentation/javascript/examples/control-bounds-restriction

Also, posted question in stackoverflow. https://stackoverflow.com/questions/54216582/why-restriction-bound-property-not-working Please help. Thanks

[Ninjaman494]

I know this an old issue, but I found that there are minZoom and maxZoom props, maybe you can use them to get the behavior you want? I'm using it like this to prevent the map from zooming in too much when the bounds are empty:

<Map
    ref={this.mapRef}
    style={{color:'#283593'}}
    google={this.props.google}
    initialCenter={this.props.center}
    bounds={this.bounds}
    maxZoom={16}
>

[martinlundin]

Yea the minZoom and maxZoom are very handy, but it would also be nice to have a restriction bound as described in Restricting Map Bounds Would be really awesome if it would work with something like this:

<Map
	google={this.props.google}
	style={style}
	zoom={15}
        initialCenter={{
             lng: 17.08700585,
             lat: 61.29914475
         }}
	restriction={{
	    latLngBounds: {
	        north: 69,
	        south: 53,
	        west: 8,
	        east: 25,
	    },
	    strictBounds: true,
	}}
>

I tried it but unfortunately it doesn't seems to be implemented.

[stefan-francis]

Is there any way I can restrict the map to a boundary with latLngBounds? I tried to add the same example shown here but it seems it is still not implemented yet😞