How to call from LatLngToDivPixel to Google Maps API V3?

Question

I know this method exists and is documented, but I don’t know how to get the MapCanvasProjection object.

Answer 1

Take a 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. Much easier in v2 - another drawback of google api v3!

Answer 2

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

Here's the version of the function that someone sent somewhere else (I can't find it right now), this 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 anytime, anywhere. I especially needed it for custom context menus, and it works great.

EDIT : I also wrote the inverse function fromPixelToLatLng , which does exactly the opposite. It is simply based on the first, using some mathematics:

 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); } 

Answer 3

I was not satisfied with the answers here. So I did some experiments and found the “simplest” working solution that is close to Ralph’s answer, but hopefully more understandable. (I want Google to make this feature more accessible!)

First, you declare a subclass of OverlayView somewhere like this:

 function CanvasProjectionOverlay() {} CanvasProjectionOverlay.prototype = new google.maps.OverlayView(); CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay; CanvasProjectionOverlay.prototype.onAdd = function(){}; CanvasProjectionOverlay.prototype.draw = function(){}; CanvasProjectionOverlay.prototype.onRemove = function(){}; 

Then, somewhere else in your code where you create the map instance, you also create an instance of this OverlayView and set its map, for example:

 var map = new google.maps.Map(document.getElementById('google-map'), mapOptions); // Add canvas projection overlay so we can use the LatLng to pixel converter var canvasProjectionOverlay = new CanvasProjectionOverlay(); canvasProjectionOverlay.setMap(map); 

Then, when you need to use fromLatLngToContainerPixel , you simply do this:

 canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(myLatLng); 

Please note that since the MapCanvasProjection object will only be available after calling draw() , which once was before the idle map, I suggest creating a logical flag "mapInitialized", setting it to true on the first idle map callback. And then do what you need to do only after that.

Answer 4

 var map; // Create your map MyOverlay.prototype = new google.maps.OverlayView(); MyOverlay.prototype.onAdd = function() { } MyOverlay.prototype.onRemove = function() { } MyOverlay.prototype.draw = function() { } function MyOverlay(map) { this.setMap(map); } var overlay = new MyOverlay(map); var projection = overlay.getProjection(); 

Answer 5

To get a MapCanvasProjection, you can get a class from OverlayView and call the getProjection () method, which returns a MapCanvasProjection type

onAdd (), draw () and onRemove () must be implemented for output from OverlayView.

 function MyOverlay(options) { this.setValues(options); var div = this.div_= document.createElement('div'); div.className = "overlay"; }; // MyOverlay is derived from google.maps.OverlayView MyOverlay.prototype = new google.maps.OverlayView; MyOverlay.prototype.onAdd = function() { var pane = this.getPanes().overlayLayer; pane.appendChild(this.div_); } MyOverlay.prototype.onRemove = function() { this.div_.parentNode.removeChild(this.div_); } MyOverlay.prototype.draw = function() { var projection = this.getProjection(); var position = projection.fromLatLngToDivPixel(this.getMap().getCenter()); var div = this.div_; div.style.left = position.x + 'px'; div.style.top = position.y + 'px'; div.style.display = 'block'; }; 

then when you create a map

 var OverLayMap = new MyOverlay( { map: map } ); 

For V2, you should be able to call fromLatLngToDivPixel from your GMap2 instance.

 var centerPoint = map.fromLatLngToDivPixel(map.getCenter());