JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id='map-canvas' ></div>

CSS

#map-canvas {
    width : 1200px; /* map width */
    height: 600px;  /* map height */
}

JavaScript

var mapOptions = {
    center: new google.maps.LatLng(55.90878, -7.69042),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(49.90878, -7.69042),
    new google.maps.LatLng(60.88770, -0.83496) 
);

// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
    if (strictBounds.contains(map.getCenter())) return;
    
    // We're out of bounds - Move the map back within the bounds
    var c = map.getCenter(),
        x = c.lng(),
        y = c.lat(),
        maxX = strictBounds.getNorthEast().lng(),
        maxY = strictBounds.getNorthEast().lat(),
        minX = strictBounds.getSouthWest().lng(),
        minY = strictBounds.getSouthWest().lat();
    
    if (x < minX) x = minX;
    if (x > maxX) x = maxX;
    if (y < minY) y = minY;
    if (y > maxY) y = maxY;
    
    map.setCenter(new google.maps.LatLng(y, x));
});