How to call fromLatLngToDivPixel in Google Maps API V3?

Question

I know that method exists and is documented, but I don't know how to get an MapCanvasProjection object.

Answer 1

Look at http://qfox.nl/notes/116

var overlay = new google.maps.OverlayView(); overlay.draw = function() {}; overlay.setMap(map); var point = overlay.getProjection().fromLatLngToDivPixel(latLng);  

Ugly indeed. Much easier in v2 - another flaw of google api v3!

Answer 2

I think the easiest way is to ignore Google's desire to make our life harder by removing and hiding useful functions instead of adding new ones, and just to write your own methods that do the same thing.

Here's a version of a function somebody posted somewhere else (I can't find it right now), that worked for me:

fromLatLngToPixel: function (position) {   var scale = Math.pow(2, Map.getZoom());   var proj = Map.getProjection();   var bounds = Map.getBounds();    var nw = proj.fromLatLngToPoint(     new google.maps.LatLng(       bounds.getNorthEast().lat(),       bounds.getSouthWest().lng()     ));   var point = proj.fromLatLngToPoint(position);    return new google.maps.Point(     Math.floor((point.x - nw.x) * scale),     Math.floor((point.y - nw.y) * scale)); }, 

Now you can call it any time and any where you want. I especially needed it for custom context menus, and it does it's job perfectly.

EDIT: I also wrote a reverse function, fromPixelToLatLng that does exactly the opposite. It is simply based on the first one, with some math applied:

fromPixelToLatLng: function (pixel) {   var scale = Math.pow(2, Map.getZoom());   var proj = Map.getProjection();   var bounds = Map.getBounds();    var nw = proj.fromLatLngToPoint(     new google.maps.LatLng(       bounds.getNorthEast().lat(),       bounds.getSouthWest().lng()     ));   var point = new google.maps.Point();    point.x = pixel.x / scale + nw.x;   point.y = pixel.y / scale + nw.y;    return proj.fromPointToLatLng(point); }