Get heading and pitch from pixels on Street View

Question

I think this is the best place for this question.

I am trying to get the heading and pitch of any clicked point on an embedded Google Street View.

The only piec

Answer 1

This answer is unprecise, have a look at most recent answer of user3146587.

I'm not very good at mathematical explanations. I've coded an example and tried to explain the steps in the code. As soon as you click on one point in the image, this point becomes the new center of the image. Even though you have explicitly not demanded for this, this is perfect for illustrating the effect. The new image is drawn with the previously calculated angle.

Example: JSFiddle

The important part is, that I use the radian to calculate radius of the "sphere of view". The radian in this case is the width of the image (in your example 100)

radius = radian / FOV

With the radian, radius and the relative position of the mouse position I can calculate the degree that changes from the center to the mouse position.

Center(50,50)
MousePosition(75/25)
RelativeMousePosition(25,-25)

When the relative mouse position is 25 the radian used for the calculation of the horizontal angle is 50.

radius = 50 / FOV // we've calculated the radius before, it stays the same

See this image for the further process:

I can calculate the new heading and pitch when I add/subtract the calculated angle to the actual angle (depending on left/right, above/under). See the linked JSFiddle for the correct behavior of this.

Doing the reverse is simple, just do the listed steps in the opposite direction (the radius stays the same).

As I've already mentioned, I'm not very good at mathematical explanations, but don't hesitate to ask questions in the comments.