Geo grid

by Chris Hughes

HTML

<script src="//maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyDNB8wMNR8pBl6jqe3rt65GofY97nWPfEw"></script>

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

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

JavaScript

var gMapsKey = 'AIzaSyDNB8wMNR8pBl6jqe3rt65GofY97nWPfEw'; //API key
var gridStep = 5; //in km
var earthR = 6378.137; //Earth radius in km
var cityLat = 39.20;
var cityLong = -75.5;
var squareSize = 240; //in km
var centerPoint = new google.maps.LatLng(cityLat, cityLong);
var spherical = google.maps.geometry.spherical;
var sSize = squareSize * 1000 / 2;
var north = spherical.computeOffset(centerPoint, sSize, 0);
var west = spherical.computeOffset(centerPoint, sSize, -90);
var south = spherical.computeOffset(centerPoint, sSize, 180);
var east = spherical.computeOffset(centerPoint, sSize, 90);
var topLat = north.lat();
var bottomLat = south.lat();
var leftLong = west.lng();
var rightLong = east.lng();

var area = [
  new google.maps.LatLng(topLat, leftLong),
  new google.maps.LatLng(topLat, rightLong),
  new google.maps.LatLng(bottomLat, rightLong),
  new google.maps.LatLng(bottomLat, leftLong),
  new google.maps.LatLng(topLat, leftLong) //Start & end point 
];

function rad(x) {
  return x * Math.PI / 180;
};

function getStepLat(currLat) {
  return parseFloat((gridStep * (360 / (2 * Math.PI * earthR * Math.cos(rad(currLat))))).toFixed(6))
};

function getStepLong() {
  return parseFloat((gridStep * (360 / (2 * Math.PI * earthR))).toFixed(6))
};

console.log(getStepLat(0) == getStepLong()); //test

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: centerPoint,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  var infowindow = new google.maps.InfoWindow();
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < area.length; i++) {
    bounds.extend(area[i]);
  }

  // The Center of the polygon
  var latlng = bounds.getCenter();
  var point1 = new google.maps.LatLng(topLat, leftLong);
  var point2 = new google.maps.LatLng(topLat, rightLong);

  function getDistance(p1, p2) {
    var d = (spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
    return parseFloat(d);
  }

  var...