I thought I had HTML5 (pixel coordinates) on top of Google Maps (lat/long coordinates) figured out. I hadn’t, but I think I’m getting closer with my newest experiment. Basically, it loads a Google Map, and places an HTML5 canvas over top (which is why you can’t do anything directly to the map). Then, my trusty PaperJS-powered random circle moves from place to place dropping HTML5 circles and path lines. Each time it drops a circle and draws a line, the circle’s pixel coordinates are converted to lat/long and sent through to the Google Maps reverse geocoder service.
edit: of course, now that I actually Googled this topic, I see it was answered on Stack Exchange over two years ago. But, it’s more fun if you do it yourself, right? Plus, the people on Stack Exchange are mean.
Here’s the relevant code:
//map projection var proj = map.getProjection(); //map extent var bounds = map.getBounds(); //extent corner coords (lat,long) var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); //extent corner pixel coords (x,y) var neWorldXY = proj.fromLatLngToPoint(ne); var swWorldXY = proj.fromLatLngToPoint(sw); //location pixel coords, scaled by zoom level (x,y) var curPixelX = currentPoint.position.x / Math.pow(2,map.getZoom()); var curPixelY = currentPoint.position.y / Math.pow(2,map.getZoom()); //location world coords (x,y) var curWorldX = curPixelX + swWorldXY.x; var curWorldY = curPixelY + neWorldXY.y; var curWorldPoint = new google.maps.Point(curWorldX,curWorldY); //location coords (lat/long) var curLatLng = proj.fromPointToLatLng(curWorldPoint);