How to limit dragging of google maps map?

Question

Google

Hello everyone, I searched but I couldn’t find it, can someone tell me, there is a GOOGLE MAPS map on the site, when you drag the map after the borders, an endless gray background appears, how to make it so that when you drag the map with the mouse, the map stops moving when it reaches the gray background (to the borders ).
There is a draggable parameter, it is responsible for moving the map, if you turn it off, the map stops moving altogether., this does not suit me

Answer 1

up

Answer 2

I did something like this.

map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);


        var allowedBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(-63.5),
            new google.maps.LatLng(63.5));
            
        google.maps.event.addListener(map, 'dragend', function() {
            var maxY = allowedBounds.getNorthEast().lat();
            var minY = allowedBounds.getSouthWest().lat();
            var x = map.getCenter().lng();
            var y = map.getCenter().lat(); 
            
            if ((y < maxY && y > 0) || (y > minY && y < 0)) {
                return;
            }

            if (y < minY) y = minY;
            if (y > maxY) y = maxY;

            map.setCenter(new google.maps.LatLng(y, x));
        });