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

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! :)