Hi,
I'm trying to make it easier for users to add overlays to the my web app, and to do this I need to have an accurate lat/long point of the div corners. Complicating this is the fact I've added the jquery rotate library available on google code.
So what I do now is get the top, left, right and height values from the div's CSS.
Assuming that
- overlay is the OverlayView object described in the custom overlay secion of the documentation and has already been initialized
- newElement is the new image overlay
- map is the map view
var overlay = new google.maps.OverlayView
var container = getDocumentById("newElement);
var top = container.style.top;
var left= container.style.left;
var right = container.style.right
var height = container.style.height
var topRight = overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(top, right));
var bottomLeft = overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(left, top-height));
My issue is that the topRight and bottomLeft coordinates are off quite a bit. When I align the image,
topRight has a location of 43.6812604043771, -70.45211922222899 when it should be 43.682516,-70.450773
and bottomLeft has a location of 43.683333966614995, -70.45189391667174 when it should be 43.681413,-70.45168
These coordinates are off by at least 20 meters or so. Is there a better way to actually calculate the coordinate locations without resorting to a marker drop and drag?