Search code examples
google-mapsgoogle-maps-api-3map-projections

What does the google.maps.Projection class do?


Recently I found out the hard way that to convert between LatLngs and pixel coordinates on screen I shouldn't use the Projection class that is easily accessed through Map.getProjection, but instead I should use the MapCanvasProjection class that can only be accessed through OverlayView.

The latter is nice and handy if you are working with a custom overlay, but if you're not, it's really painful to get access to the MapCanvasProjection. So far I have solved this problem for myself by adding a method to the Map class that will give me easy access to the desired projection class:

google.maps.Map.prototype.getCanvasProjection = function() {
  if (!this.projectionOverlay) {
    this.projectionOverlay = new google.maps.OverlayView();
    this.projectionOverlay.onAdd = function(){};
    this.projectionOverlay.onRemove = function(){};
    this.projectionOverlay.draw = function(){};
    this.projectionOverlay.setMap(this);
  }
  return this.projectionOverlay.getProjection();
};

This all looks like a big hack to do something that should be trivial. And it ever more makes me wonder what does the google.maps.Projection class do? When I read the documentation it seems to me that Projection.fromLatLngToPoint does the same thing as MapCanvasProjection.fromLatLngToContainerPixel, but it does not. I'm puzzled.


Solution

  • Projection.fromLatLngToPoint means converting from Latitude Longitude to Mercator projection. MapCanvasProjection does a projection to pixel (including Mercator).