How to convert from (x, y) screen coordinates to LatLng (Google Maps)

Question

I am implementing an application using Google Maps and Leap Motion and what I want right now, and I am a bit stuck, is a way to convert (x, y) screen coordinates into a Google Maps LatLng object.

I want to achieve this in order to start, for example, a panorama (Street View) at the point where the user is pointing with the Leap Motion.

I know about the presence of fromPointToLatLng function, but I have no clue what is the right approach in using it and how can I translate my x and y coordinates into lat lng variables.

Can you please help me with this?

Answer 1

function latLng2Point(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); }  function point2LatLng(point, 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 = new google.maps.Point(point.x / scale + bottomLeft.x, point.y / scale + topRight.y);   return map.getProjection().fromPointToLatLng(worldPoint); } 

Answer 2

After some research and some fails I came up with a solution. Following the documentation from this link I found out that the google Points are computed in the range of x:[0-256], y:[0-256] (a tile being 256x256 pixels) and the (0,0) point being the leftmost point of the map (check the link for more information).

However, my approach is as it follows:

• having the x and y coordinates (which are coordinates on the screen - on the map) I computed the percentage where the x and y coordinates were placed in response to the div containing the map (in my case, the hole window)

• computed the NortEast and SouthWest LatLng bounds of the (visible) map

• converted the bounds in google Points

• computed the new lat and lng, in google points, with the help of the boundaries and percentage of x and y

• converted back to lat lng

    // retrieve the lat lng for the far extremities of the (visible) map   var latLngBounds = map.getBounds();   var neBound = latLngBounds.getNorthEast();   var swBound = latLngBounds.getSouthWest();    // convert the bounds in pixels   var neBoundInPx = map.getProjection().fromLatLngToPoint(neBound);   var swBoundInPx = map.getProjection().fromLatLngToPoint(swBound);    // compute the percent of x and y coordinates related to the div containing the map; in my case the screen   var procX = x/window.innerWidth;   var procY = y/window.innerHeight;    // compute new coordinates in pixels for lat and lng;   // for lng : subtract from the right edge of the container the left edge,    // multiply it by the percentage where the x coordinate was on the screen   // related to the container in which the map is placed and add back the left boundary   // you should now have the Lng coordinate in pixels   // do the same for lat   var newLngInPx = (neBoundInPx.x - swBoundInPx.x) * procX + swBoundInPx.x;   var newLatInPx = (swBoundInPx.y - neBoundInPx.y) * procY + neBoundInPx.y;    // convert from google point in lat lng and have fun :)   var newLatLng = map.getProjection().fromPointToLatLng(new google.maps.Point(newLngInPx, newLatInPx)); 

Hope this solution will help someone out also! :)