Quick & Dirty way to draw a grid of squares on a google map

square-grid-gmaps.js

const mapCenterPosition = {lat: 45.438759, lng: 12.327145} // venice
const SQUARE_SIZE =  970; // mt
// quick way to lock the drawing on the first bounds_changed event
let drawn = false;
// all of the drawn rectangles
let rectangles = []
window.initMap = () => {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: mapCenterPosition
  });

  google.maps.event.addListener(map, 'bounds_changed', function () {
    drawPolygons(map);
  });
}

const drawPolygons = ( map) => {
  if (drawn) {
    return
  }

  rectangles = []

  drawn = true
  const bounds = map.getBounds()
  const mapNorthEast = bounds.getNorthEast();

  // Start drawing from the bottom right of the corner
  let rectangle = drawRectangleStartingFrom(bounds.getSouthWest(), map)
  rectangles.push(rectangle)
  let rectangleBounds = rectangle.getBounds()
  let ne = rectangleBounds.getNorthEast()
  let sw = rectangleBounds.getSouthWest()
  // draw the first line of squares
  drawPolygonLines(map, mapNorthEast, ne, sw)
  let rectangleUp = drawRectangleStartingFrom({
    lat: ne.lat(),
    lng: sw.lng()
  }, map)
  rectangles.push(rectangleUp)

  // draw the second line of squares (moving up)
  rectangleBounds = rectangleUp.getBounds()
  ne = rectangleBounds.getNorthEast()
  sw = rectangleBounds.getSouthWest()
  drawPolygonLines(map, mapNorthEast, ne, sw)

  while (ne.lat() < mapNorthEast.lat()) {
    rectangleUp = drawRectangleStartingFrom({
      lat: ne.lat(),
      lng: sw.lng()
    }, map)
    rectangleBounds = rectangleUp.getBounds()
    ne = rectangleBounds.getNorthEast()
    sw = rectangleBounds.getSouthWest()
    drawPolygonLines(map, mapNorthEast, ne, sw)
    rectangles.push(rectangleUp)
  }

  console.log(rectangles.map(rectangle => {
    let rectangleBounds = rectangle.getBounds()
    let ne = rectangleBounds.getNorthEast()
    let sw = rectangleBounds.getSouthWest()

    return {
      ne: {
        lat: ne.lat(),
        lng: ne.lng()
      },
      sw: {
        lat: sw.lat(),
        lng: sw.lng()
      }
    }
  }))
}

const drawPolygonLines = (map, mapNorthEast, ne, sw) => {
  while (ne.lng() < mapNorthEast.lng()) {
    const rectangle = drawRectangleStartingFrom({
      lat: sw.lat(),
      lng: ne.lng()
    }, map)
    const rectangleBounds = rectangle.getBounds()
    ne = rectangleBounds.getNorthEast()
    rectangles.push(rectangle)
  }
}

const drawRectangleStartingFrom = (sw, map) => {
  const ne = google.maps.geometry.spherical.computeOffset(sw, SQUARE_SIZE, 45);
  return  new google.maps.Rectangle({
    strokeOpacity: .6,
    strokeWeight: .1,
    fillColor: 'rgba(0,255,204,1)',
    fillOpacity: .6,
    bounds: new google.maps.LatLngBounds(sw,ne),
    map: map,
    zIndex: 0
  });
}

Of course don't forget html and css

#map {
  position: absolute;
  inset: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GMAPS_API_KEY&callback=initMap&libraries=geometry"></script>