The POV angle of the streetview marker icon doesn't reflect what is currently displayed in the Google Panorama container

[Raruto]

Checklist

• I've searched through the existing issues and this bug has never been reported before

Subject of the issue

As you can see in the image below:

• in the google panorama container we are looking towards North
• the marker arrow points towards East

Steps to reproduce

1. edit your config.js file (g3w-client) providing it with a valid google key

const G3W_KEYS = {
  google: 'your super secret api key! :)',
};

2. open a project of your choice (eg: http://localhost:3000/en/map/buildings/qdjango/10/)
3. click on streetview control
4. click anywhere on the map
5. now without zooming or panning the map your map should look like the image above

Environment

• g3w-admin: 3.5.dev-20230203102702
• g3w-client: 3.8.0-alpha.1
• browser: Firefox v109 and Chrome v109
• operating system: Windows 10 64 bit

Link to your project

The same issue can be encountered here as well:

https://v35.g3wsuite.it/it/map/demo-35/

Additional info

No response

[volterra79]

@Raruto this happen first time because no information about orientation come from api. If you start to move from streetview panel, you'll see right orientation of arrow because it calculate from previous position

[Raruto]

If you start to move from streetview panel, you'll see right orientation of arrow because it calculate from previous position

In my opinion most of the time it is updated on a wrong direction (anyway, just change the zoom level to restore the initial situation with a completely wrong direction of the arrow..).

I don't know if it is currently implemented, but it's also possible to add a listener for the "pov_changed" event:

// Source: https://developers.google.com/maps/documentation/javascript/examples/streetview-events#maps_streetview_events-javascript

panorama.addListener("pov_changed", () => {
  const headingCell = document.getElementById("heading-cell");
  const pitchCell = document.getElementById("pitch-cell");

  headingCell.firstChild.nodeValue = panorama.getPov().heading + "";
  pitchCell.firstChild.nodeValue = panorama.getPov().pitch + "";
});