How to create a Grid in the viewing area of a map

Question

I need to place a grid on a map where the grid box is 1/4 minute x 1/4 minute. IOWs a trapezoid. I am using JavaScript leveraged by Delphi and TWebBrowser.

Right n

Answer 1

It would be more efficient to draw the grid as complete polylines rather than boxes:

function createGridLines(bounds) {
    // remove any existing lines from the map
    for (var i=0; i< latPolylines.length; i++) {
            latPolylines[i].setMap(null);
    }
    latPolylines = [];
    for (var i=0; i< lngPolylines.length; i++) {
            lngPolylines[i].setMap(null);
    }
    lngPolylines = [];
    // don't add the lines if the boxes are too small to be useful
    if (map.getZoom() <= 6) return; 
    var north = bounds.getNorthEast().lat();
    var east = bounds.getNorthEast().lng();
    var south = bounds.getSouthWest().lat();
    var west = bounds.getSouthWest().lng();

    // define the size of the grid
    var topLat = Math.ceil(north / llOffset) * llOffset;
    var rightLong = Math.ceil(east / llOffset) * llOffset;

    var bottomLat = Math.floor(south / llOffset) * llOffset;
    var leftLong = Math.floor(west / llOffset) * llOffset;

    for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) {
        // lines of latitude
        latPolylines.push(new google.maps.Polyline({
            path: [
            new google.maps.LatLng(latitude, leftLong),
            new google.maps.LatLng(latitude, rightLong)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
    }
    for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) {
        // lines of longitude
        lngPolylines.push(new google.maps.Polyline({
            path: [
            new google.maps.LatLng(topLat, longitude),
            new google.maps.LatLng(bottomLat, longitude)],
            map: map,
            geodesic: true,
            strokeColor: '#0000FF',
            strokeOpacity: 0.5,
            strokeWeight: 1
        }));
    }
}

proof of concept fiddle

code snippet:

var map;

var qtrArray = [];
var linesArray = [];
var Startlatlng;
var llOffset = 0.0666666666666667;

var drawGridBox = false;
var gridline;
var polylinesquare;
var latPolylines = [];
var lngPolylines = [];
var bounds = new google.maps.LatLngBounds();

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(33.00, -100.00),
    zoom: 10,
    streetViewControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true
  });


  google.maps.event.addListener(map, 'bounds_changed', function() {
    createGridLines(map.getBounds());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);


function createGridLines(bounds) {
  // remove any existing lines from the map
  for (var i = 0; i < latPolylines.length; i++) {
    latPolylines[i].setMap(null);
  }
  latPolylines = [];
  for (var i = 0; i < lngPolylines.length; i++) {
    lngPolylines[i].setMap(null);
  }
  lngPolylines = [];
  // don't add the lines if the boxes are too small to be useful
  if (map.getZoom() <= 6) return;
  var north = bounds.getNorthEast().lat();
  var east = bounds.getNorthEast().lng();
  var south = bounds.getSouthWest().lat();
  var west = bounds.getSouthWest().lng();

  // define the size of the grid
  var topLat = Math.ceil(north / llOffset) * llOffset;
  var rightLong = Math.ceil(east / llOffset) * llOffset;

  var bottomLat = Math.floor(south / llOffset) * llOffset;
  var leftLong = Math.floor(west / llOffset) * llOffset;

  for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) {
    // lines of latitude
    latPolylines.push(new google.maps.Polyline({
      path: [
        new google.maps.LatLng(latitude, leftLong),
        new google.maps.LatLng(latitude, rightLong)
      ],
      map: map,
      geodesic: true,
      strokeColor: '#0000FF',
      strokeOpacity: 0.5,
      strokeWeight: 1
    }));
  }
  for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) {
    // lines of longitude
    lngPolylines.push(new google.maps.Polyline({
      path: [
        new google.maps.LatLng(topLat, longitude),
        new google.maps.LatLng(bottomLat, longitude)
      ],
      map: map,
      geodesic: true,
      strokeColor: '#0000FF',
      strokeOpacity: 0.5,
      strokeWeight: 1
    }));
  }
}

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