javascript google map empty gray background when zoomed to zero

Question

Am using google map javascript for my hybrid webview app. When i zoom out map till 0, it will show gray area while map tiles will be on center of the screen.

Is there any way i can fix this to avoid the gray area?

I have tried using map tile image for background but is noticeable when you move map. I have also tried setting minZoom to 2, but still if i scroll map the gray area will be visible.

Or is it possible to prevent scrolling map area when zoom is '2`?

MinZoom default

MinZoom 2

I tried below also but after zooming out, it doesn't allow me to zoom in back.

google.maps.event.addListener(map, 'zoom_changed', function(){
    map.setOptions({draggable: ((map.getZoom() < 3) ? false : true)});
});

And also this, but the else statement doesn't get called.

google.maps.event.addListener(map, 'zoom_changed', function(){
        if(map.getZoom() < 3){
            document.getElementById('mapCanvas').setAttribute("style", "pointer-events: none;"); 
        }else{
            document.getElementById('mapCanvas').removeAttribute("style"); 
        }
    });

Answer 1

You can find the real north and south edges of the map.

Then use a MapRestriction to prevent the map from panning outside the defined area.

Apply the calculated result to the north and south parameters of the restriction. Set west: -180 and east: 180 to apply a latitude only restriction.

Set strictBounds: true to strictly restrict to the given bounds, even when zooming out.

function initMap() {

  var maxLat = Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;
  var myLatLng = new google.maps.LatLng(-24, 123);
  var mapOptions = {
    zoom: 2,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    restriction: {
      latLngBounds: {north: maxLat, south: -maxLat, west: -180, east: 180},
      strictBounds: true
    },
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

#map-canvas {
  height: 110px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>