How can I make a Google Maps API v3 hexagon tiled map, preferably coordinate-based?

Question

http://econym.org.uk/gmap/example_eshapes.htm has a Google Maps API v2 example of how to tile hexagons, although the implementation scales painfully: it has a center hexagon

Answer 1

The following example demonstrates how to render horizontal hexagons grid:

function initialize() {
    var mapOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    var startPosition = new google.maps.LatLng(33.748589, -84.390392);  //Atlanta, GA, USA 
    var radius = 40 * 1000; //radius in meters
    drawHorizontalHexagonGrid(map,startPosition,radius,6);
    map.setCenter(startPosition);
}

function drawHorizontalHexagonGrid(map,startPosition,radius,count){
    var curPos = startPosition;
    var width = radius * 2 * Math.sqrt(3)/2 ; 
    for(var i = 0;i < count; i++){
        drawHorizontalHexagon(map,curPos,radius);
        curPos = google.maps.geometry.spherical.computeOffset(curPos, width,90);   
    }
}

function drawHorizontalHexagon(map,position,radius){
    var coordinates = [];
    for(var angle= 0;angle < 360; angle+=60) {
       coordinates.push(google.maps.geometry.spherical.computeOffset(position, radius, angle));    
    }
  
    // Construct the polygon.
    var polygon = new google.maps.Polygon({
        paths: coordinates,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });
    polygon.setMap(map);
    map.setCenter(position);
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}