The fix in my case was to use the updated tile service from the same publisher. It takes simpler parameters:
globalfoovar = new google.maps.ImageMapType({ getTileUrl: function(tile, zoom) { return "http://bar.com/" + zoom + "/" + tile.x + "/" + tile.y +".png"; }, tileSize: new google.maps.Size(256, 256), opacity:0.60, isPng: true }); googleMap.overlayMapTypes.push(null);
As you can see, this is much simpler than the code I posted in the problem description.
However, if you are still reading, you probably still want an answer to the original problem that converts latlng to pixels. Don’t worry, I have a solution for this.
To access the 4 useful latlng, point, and pixel transforms, you need to add a dummy OverlayView.
Step 1) Define a stub so that it is available globally along with your map and other options:
var googleMap = {};
Step 2) After rendering your map, configure this OverlayView layout / dummy as follows:
googleMap = new google.maps.Map($('#mapCanvas')[0]); // google map init mapCanvasStub = function (map) { this.setMap(map); } // start building overlay stub mapCanvasStub.prototype = new google.maps.OverlayView(); mapCanvasStub.prototype.draw = function() {}; mapCanvasStub = new mapCanvasStub(googleMap); // bin dthe overlay to the map
Now you have a functional OverlayView tied to a map, whenever you need to use these transformations, you can do it like this:
var projection = mapCanvasStub.getProjection(); var position = projection.fromLatLngToContainerPixel( latLng ); // or fromContainerPixelToLatLng() // or fromDivPixelToLatLng() // or fromLatLngToDivPixel() // or fromLatLngToDivPixel()
In my case, I use this to create custom info bubbles, here is a snippet from my click event:
function customAlertClick(a,b,c) { var projection = mapCanvasStub.getProjection(); var position = projection.fromLatLngToContainerPixel(b); var top = (position.y + parseInt($('#mapCanvas').position().top)); var lft = (position.x + parseInt($('#mapCanvas').position().left));
Hope this helps someone else to jump into V3.
If you're wondering why we should jump over these extra hoops to make something so simple in V2, the answer is pretty obvious when you think about it. V3 is configured to work on mobile devices, where bandwidth and processor power are limited. They eliminate as much code as possible in order to get simple map rendering, and they expect you to manually enable these additional services if you absolutely need them.
If I had more time, I would write sample.html, but that should make you.