Google maps api v3 - divide region into equal parts using tiles

Question

I am currently working on dividing the region into equal parts and display those parts to the user on the map either using tiles or rectangles whichever looks nice. I know the latitude and longitude of the region. I am using the following code. There are couple of requirements given below. (1) Using this code, I am not able to divide the region into exact equal parts. (2) After dividing by tiles or rectangles, how to get the center of each tile.

Any help would be appreciated.

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: northEast.lat() + (tileHeight * y),
            south: southWest.lat(),
            east: northEast.lng(),
            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

          });
        }
      }
    }   
  }   

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

Answer 1

Increment both the edges of the square as you iterate through the values and fix the start point as the lower left corner:

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',
        strokeWeight: 2,
        map: map,
        bounds: areaBounds

      });
    }
  }
}   

proof of concept fiddle

code snippet:

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

        });
      }
    }
  }
}

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>