Googleマップにフィールドワーク用のグリッドを表示する #GoogleMapsAPI

フィールドワーク時に，領域をグリッド上に分割して調査したくなることないですか？ないですね！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Grid on Google Maps </title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
    .labels {
       color       : "#0000ff"
       font-size   : 15px;
       text-align  : center;
       width       : 30px;
       white-space : nowrap;
    }
  </style>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <!-- view and download lib: http://www.ohloh.net/p/google-maps-utility-library-v3 -->
  <script src="/YOUR_PATH/TO/markerwithlabel.js" type="text/javascript"></script>
  <script type="text/javascript">
    var GRID_DIST   = 5 // meter
    var GRID_NUM    = 20;
    var DEFAULT_LAT = 35.681382;
    var DEFAULT_LNG = 139.766084;

    var map;
    google.maps.event.addDomListener(window, 'load', function() {
      var mapOptions = {
        zoom         : 20,
        center       : new google.maps.LatLng(DEFAULT_LAT, DEFAULT_LNG),
        mapTypeId    : google.maps.MapTypeId.ROADMAP,
        scaleControl : true
      };
      map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
      drawGrid(DEFAULT_LAT, DEFAULT_LNG);
    });

    function drawGrid(lat, lng) {
      for(var i = 0; i <= GRID_NUM; i++) {
        var pointsVertical = [
          new google.maps.LatLng(lat , lng + getStepLng(lat, lng, i)),
          new google.maps.LatLng(lat + getStepLat(lat, lng, GRID_NUM), lng + getStepLng(lat, lng, i)),
        ];
        drawLine(pointsVertical);

        var pointsHorizontal = [
          new google.maps.LatLng(lat + getStepLat(lat, lng, i) , lng),
          new google.maps.LatLng(lat + getStepLat(lat, lng, i), lng + getStepLng(lat, lng, GRID_NUM)),
        ];
        drawLine(pointsHorizontal);
      }
      var codeA = "A".charCodeAt(0);
      for(var i = 0; i < GRID_NUM; i++) {
        for(var j = 0; j < GRID_NUM; j++) {
          drawLabel(lat + getStepLat(lat, lng, i) + getStepLat(lat, lng, 1, GRID_DIST/2), lng + getStepLng(lat, lng, j) + getStepLng(lat, lng, 1, GRID_DIST/2), String.fromCharCode(codeA + i) + (j+1));
        }
      }
      map.panTo(new google.maps.LatLng(lat + getStepLat(lat, lng, GRID_NUM/2), lng + getStepLng(lat, lng, GRID_NUM/2)));
    }

    var UNIT = 1.0 / 3600.0;
    // refer http://mononofu.hatenablog.com/entry/20090324/1237894846
    function getStepLat(lat, lng, step, dist) {
      dist = dist || GRID_DIST;
      var byou = 30.9064676;
      return (UNIT * dist / byou) * step;
    }
    function getStepLng(lat, lng, step, dist) {
      dist = dist || GRID_DIST;
      var byou = 6378150 * Math.cos(lat / 180 * Math.PI) * 2 * Math.PI / (360 * 60 * 60);
      return (UNIT * dist / byou) * step;
    }

    function drawLine(points) {
      var polyLineOptions = {
        path          : points,
        strokeWeight  : 1,
        strokeColor   : "#0000ff",
        strokeOpacity : "0.8"
      };
      var line = new google.maps.Polyline(polyLineOptions);
      line.setMap(map);
    }

    function drawLabel(lat, lng, text) {
      var marker = new MarkerWithLabel({
        position     : new google.maps.LatLng(lat, lng),
        draggable    : false,
        raiseOnDrag  : false,
        map          : map,
        labelContent : text,
        labelAnchor  : new google.maps.Point(14, 10),
        labelClass   : "labels",
        labelStyle   : {opacity : 1.0},
        icon         : {},
     });
    }
  </script>
</head>
<body>
  <div id="gmap" style="width: 100%; height: 100%; border: 1px solid gray;"></div>
</body>
</html>