Google maps - divide region into equal parts and show ONLY clicked region on map

Question

Here is the code sample to divide map into equal regions. When clicking on marker at the center of a rectangle then how can i show only that particular rectangle region on google map? All other regions should NOT be in the map after clicking on marker.

function initialize() {     
var myLatlng;    
var mapOptions;

myLatlng = new google.maps.LatLng(29.98439980, -95.34140015);

    mapOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    google.maps.event.addListenerOnce(map, 'idle', function() {
      drawRectangle(map);
    });

    function drawRectangle(map) {
      var bounds = map.getBounds();
      var southWest = bounds.getSouthWest();
      var northEast = bounds.getNorthEast();

      var numberOfParts = 4;

      var tileWidth = (northEast.lng() - southWest.lng()) / numberOfParts;
      var tileHeight = (northEast.lat() - southWest.lat()) / numberOfParts;
      for (var x = 0; x < numberOfParts; x++) {
        for (var y = 0; y < numberOfParts; y++) {
          var areaBounds = {
            north: southWest.lat() + (tileHeight * (y+1)),
            south: southWest.lat() + (tileHeight * y),
            east: southWest.lng() + (tileWidth * (x+1)),
            west: southWest.lng() + (tileWidth * x)
          };

          var area = new google.maps.Rectangle({
            strokeColor: '#FF0000',
            //strokeOpacity: 0.8,
            strokeWeight: 2,
            //fillColor: '#FF0000',
            //fillOpacity: 0.35,
            map: map,
            bounds: areaBounds
          });
          var centerMark = new google.maps.Marker({
          position: area.getBounds().getCenter(),
          map: map,
          title: area.getBounds().getCenter().toUrlValue(6)
          });
        }
      }
    }   
  }   

google.maps.event.addDomListener(window, "load", initialize); 

I have tried using the map bounds code but it is not working as expected. it works only if i increase the zoom. But zoom may be different for each region.

var bounds = new google.maps.LatLngBounds();
    bounds.extend(southLatitude, eastLongitude);
    bounds.extend(northLatitude, westLongitude);
    map.fitBounds(bounds);

Answer 1

You can add the bounds of each rectangle as a property of the center marker, then use map.fitBounds to center and zoom the map to the rectangular area:

google.maps.event.addListener(centerMark, 'click', function(evt) {
  // center and zoom the map to completely show the area
  map.fitBounds(this.area);
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    // increase the zoom by one level to remove the padding.
    map.setZoom(map.getZoom()+1);
  })
}); 

proof of concept fiddle

code snippet:

function initialize() {
  var myLatlng;
  var mapOptions;

  myLatlng = new google.maps.LatLng(29.98439980, -95.34140015);

  mapOptions = {
    zoom: 10,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  google.maps.event.addListenerOnce(map, 'idle', function() {
    drawRectangle(map);
  });

  function drawRectangle(map) {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();

    var numberOfParts = 4;

    var tileWidth = (northEast.lng() - southWest.lng()) / numberOfParts;
    var tileHeight = (northEast.lat() - southWest.lat()) / numberOfParts;
    for (var x = 0; x < numberOfParts; x++) {
      for (var y = 0; y < numberOfParts; y++) {
        var areaBounds = {
          north: southWest.lat() + (tileHeight * (y + 1)),
          south: southWest.lat() + (tileHeight * y),
          east: southWest.lng() + (tileWidth * (x + 1)),
          west: southWest.lng() + (tileWidth * x)
        };

        var area = new google.maps.Rectangle({
          strokeColor: '#FF0000',
          //strokeOpacity: 0.8,
          strokeWeight: 2,
          //fillColor: '#FF0000',
          //fillOpacity: 0.35,
          map: map,
          bounds: areaBounds
        });
        var centerMark = new google.maps.Marker({
          position: area.getBounds().getCenter(),
          map: map,
          area: areaBounds,
          title: area.getBounds().getCenter().toUrlValue(6)
        });
        google.maps.event.addListener(centerMark, 'click', function(evt) {
          map.fitBounds(this.area);
          google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
            map.setZoom(map.getZoom() + 1);
          });

        });
      }
    }
  }
}

google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

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