Grid on top of Google maps produces gaps in squares

Question

I have this function that produces a grid on top of Google maps.

var map;
var gribBlockSize = 1000;

// LOCATION MELB
var startingLatLng = new google.maps.La         


        

Answer 1

Your problem is that the earth is an oblate spheriod (round), you need to account for that in your "grid", the top of the square needs to be shorter than the bottom if you are doing it by distance. The simplest solution (may or may not work for your use case) is to make the verticals parallel to the lines of longitude, pre-compute the longitude at the target latitude (the latitude where you want the distance to be correct), then use the same longitudes for all the "squares".

proof of concept fiddle

code snippet:

var map;
var gribBlockSize = 1000;
var NEmark;

// LOCATION MELB
var startingLatLng = new google.maps.LatLng(-37.68699757550263, 145.06485261920773);
var width = 10;
var height = 10;

function initialize() {
  var rectangle;
  var myOptions = {
    zoom: 10,
    center: startingLatLng,
    mapTypeControl: false,
    navigationControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  drawRects();
}

function drawRects() {
  var bounds;
  var NW = startingLatLng;
  // define horizontal lines
  var longitudes = [];
  longitudes.push(NW.lng());
  for (var i = 0; i < width; i++) {
    var longitude = google.maps.geometry.spherical.computeOffset(NW, gribBlockSize, 90).lng();
    longitudes.push(longitude)
    NW = new google.maps.LatLng(NW.lat(), longitude);
  }
  var NW = startingLatLng;
  // for each longitude, make a column of squares
  for (var i = 0; i < longitudes.length - 1; i++) {
    NW = new google.maps.LatLng(startingLatLng.lat(), longitudes[i]);
    for (var j = 0; j < height; j++) {
      var north = NW.lat();
      var south = google.maps.geometry.spherical.computeOffset(NW, gribBlockSize, 180).lat();
      var east = longitudes[i + 1];
      var west = longitudes[i];
      var corner1 = new google.maps.LatLng(north, east); // NE
      var corner2 = new google.maps.LatLng(south, east); // SE
      var corner3 = new google.maps.LatLng(south, west); // SW
      var corner4 = new google.maps.LatLng(north, west); // NW

      var polygon = new google.maps.Polygon({
        strokeColor: "#FF0000",
        strokeOpacity: 0.25,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.1,
        map: map,
        paths: [corner1, corner2, corner3, corner4]
      });
      NW = new google.maps.LatLng(google.maps.geometry.spherical.computeOffset(NW, gribBlockSize, 180).lat(), longitudes[i]);
    }
  }
  // map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

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