How can I transform a custom overlay in Google Maps to account for projection?

Question

I'm developing an application that uses Google Maps API v3. I want to make custom overlays that are squares exactly 1000km on each side (each overlay is actually a 1000x1000 transparent png, with each pixel representing 1 square km). My current implementation is this:

function PngOverlay(map,loc) {
    this._png = null;
    this._location = loc; //lat,lng of the square's center
    this.setMap(map);
}

PngOverlay.prototype = new google.maps.OverlayView();

PngOverlay.prototype.onAdd = function() {
    this._png = new Element('image',{ //using mootools
    'src': pngForLoc(this._location),
    'styles': {
        'width': 1000,
        'height': 1000,         
        'position': 'absolute'
    }
});

var panes = this.getPanes();
    panes.overlayLayer.appendChild(this._png);
}

PngOverlay.prototype.onRemove = function() {
    this._png.parentNode.removeChild(this._png);
    this._png = null;
}

PngOverlay.prototype.draw = function() {
    var dp = this.getProjection().fromLatLngToDivPixel(this._location);     
    var ps = this._png.getSize();

    var t = dp.y - (ps.y / 2);
    this._png.setStyle('top',t);

    var l = dp.x - (ps.x / 2);
    this._png.setStyle('left',l);
}

My question is this: what, if anything, do I need to do to account for Google Maps' projection? My limited understanding of Mercator is that it preserves horizontal distance but not vertical. How can I appropriately transform() my png to account for that?

Answer 1

Do you want a "square" on the ground, (3D), or on the flat map on the screen (2D)?

There's no such thing as a square on a sphere. In plane geometry, (2D), a rectangle has four right angles, but In spherical geometry, a spherical rectangle is a figure whose four edges are great circle arcs which meet at equal angles greater than 90 degrees.

So, for example, Colorado and Wyoming may look like rectangles on a flat map, but they are not so on the ground.

To determine how many pixels represent 1000 KM you'd need to use the projection calculations, but the result will vary depending on latitude.

Also, in order to overlay your images on the map you need to take the zoom level into account and either create different images for each zoom level or use something like GroundOverlay which will scale it automatically by stretching it.

Summing up, there are probably better ways to achieve what you're trying to do, and if you could explain what that is then someone might be better able to help.

marcelo - http://maps.forum.nu