As this script seems to be fully functional even without hosting, here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps Grid Generator v1.0 by nekitamo</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA9THrl1LUOes74nkRKA5pdRQjG1bqh36gwrRhcPjnOErksQFtwRTXtKJemFnfwyIysZ_raZQtiCf2uw"
type="text/javascript"></script>
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.1/src/mapiconmaker.js" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
var viewportwidth;
var viewportheight;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
} else {
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
var psize = parseInt(viewportheight)-50;
document.getElementById("map_canvas").style.height = (psize.toString() + "px");
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 12);
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder();
document.getElementById("gob").disabled=false;
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 14);
var grid = parseInt(document.getElementById("grid").value);
var size = parseFloat(document.getElementById("size").value);
var spot = new GLatLng(point.lat()+(size/2),point.lng()-(size/2));
var x = new Array (0,1,1,0,-1,-1,-1,0,1,2,2,2,2,1,0,-1,-2,-2,-2,-2,-2,-1,0,1,2,3,3,3,3,3,3,2,1,0,-1,-2,-3,-3,-3,-3,-3,-3,-3,-2,-1,0,1,2,3,4,4,4,4,4,4,4,4,3,2,1,0,-1,-2,-3,-4,-4,-4,-4,-4,-4,-4,-4);
var y = new Array (0,0,-1,-1,-1,0,1,1,1,1,0,-1,-2,-2,-2,-2,-2,-1,0,1,2,2,2,2,2,2,1,0,-1,-2,-3,-3,-3,-3,-3,-3,-3,-2,-1,0,1,2,3,3,3,3,3,3,3,3,2,1,0,-1,-2,-3,-4,-4,-4,-4,-4,-4,-4,-4,-4,-3,-2,-1,0,1,2,3);
for(i=0; i < grid; i++) {
var Lat = spot.lat()+(y[i]*size);
var Lon = spot.lng()+(x[i]*size);
var newIcon = MapIconMaker.createFlatIcon({width: 24, height: 24, primaryColor: "#0000ff", label: String(i+1), labelColor: "#ffffff", labelSize: 14, shape: "roundrect"});
marker = new GMarker(new GLatLng(Lat,Lon), {icon: newIcon});
map.addOverlay(marker);
GEvent.addListener(marker,"click", function (latlng){
var myHtml = "<small><strong>Gridmark in: "+ address + "</strong><hr>Latitude: " + latlng.lat() + "<br/>Longitude: " + latlng.lng()
+ "<br/><a href=http://maps.google.com/maps?q=GST+Gridmark@" + latlng.lat() + "," + latlng.lng()
+ "&output=kml>Save KML / Open in Google Earth</a><hr>"
+ "<a href=http://droneteam.com/gmap.html?Spot=" + latlng.lat() + "," + latlng.lng() + "&Grid=" + (10*(size/0.005)) + " target=_blank>Start Grid Search Tool from here...</a></small>";
map.openInfoWindow(latlng, myHtml);});
var polyline = new GPolyline([
new GLatLng(Lat,Lon),
new GLatLng(Lat-(size/2),Lon+(size/2))
], "#ff0000", 2, 1, {geodesic:true});
map.addOverlay(polyline);
}
document.getElementById("gob").disabled=true;
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
Location: <input type="text" size="60" name="address" value="Palo Alto, CA" />
Grid squares: <select name="grid" id="grid">
<option value=1>1
<option value="4">4
<option value="6">6
<option value="9">9
<option value="12">12
<option value="16">16
<option value="20">20
<option value="25">25
<option value="30">30
<option value="36" selected>36
<option value="42">42
<option value="56">56
<option value="64">64
<option value="72">72</select>
Square size: <select name="size" id="size">
<option value="0.0025">0.0025
<option value="0.005" selected>0.005
<option value="0.01">0.01
<option value="0.025">0.025
<option value="0.05">0.05
</select> (degrees)
<input type="submit" id="gob" value="Go!" />
</p>
<div id="map_canvas" style="width: 100%; height: 500px"></div>
</form>
</body>
</html>
Click on "select" above the script, copy-paste everything to notepad and save it as grid.html or something like that (as long as it's .html) and it should work when you open it in your browser. Usage is quite simple, you enter desired city name (or address) and select number of grid squares. It always generates exact same grids for specified city and square size, so grid squares can be simply referenced like this, for example (once we agree about standard square size):
Start the script, enter "City, CA", click "Go" and open GST from marker nr. 5
Example, if you enter i.e. "Paris, France" and set square size to 0.05 it generates the grid covering almost the whole city of Paris...
Oh, and also this: once you generate the grid, the script is locked and you have to reload the page to generate new grid again.
Btw, I also forgot to mention that I enabled keyboard control in my first script. You can use arrows, home, end, page-up and page-down keys in both map and streetview panes (click them to switch keyboard control from one to other). Especially fun with streetview - feels like some 3D video game
