author: Krasimir Tsonev

Hi there, I'm . Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff. Follow me on Twitter, GitHub, Facebook or LinkedIn

GoogleMaps API v3: convert LatLng object to actual pixels

It is not so easy as it looks like. You should get the map object's projection and the map's zoom to be able to calculate it.
function fromLatLngToPoint(latLng, map) {
  var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
  var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
  var scale = Math.pow(2, map.getZoom());
  var worldPoint = map.getProjection().fromLatLngToPoint(latLng);
  return new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale);
}

The function returns Point object, which has .x and .y property - the actual pixels of your map's container.

If you enjoy this post, share it on Twitter, Facebook or LinkedIn. Or maybe comment below: