CODEWITHSUNDEEP
javascriptgoogle-street-view
Michel_
Michel_

Reputation: 31

How to auto rotate a Street View panorama?

How to rotate automatically a street view panorama using the API?

Something like this Google gallery.

Upvotes: 3

Views: 6758

Answers (2)

Kyll
Kyll

Reputation: 7139

To change the panorama angle you have to change a Point-of-View parameter, namely heading.
This variable is in degrees (0 is North, 90 East, ...).

Given a variable that holds your panorama:

const panorama = new google.maps.StreetViewPanorama(container, opts);

Get the panorama POV with getPov:

const oldPov = panorama.getPov();

Then replace the POV with the new value:

panorama.setPov({
  header : oldPov.header + 1,
  pitch  : oldPov.pitch
});

This will rotate the point-of-view by one degree clockwise. Now you just need to use setInterval to have this code repeated automatically:

let rotation = 1,   // In degrees
    interval = 100; // In milliseconds

const rotateId = setInterval(() => {
  const oldPov = panorama.getPov();
  panorama.setPov({
    header : oldPov.header + rotation,
    pitch  : oldPov.pitch
  });
}, interval);

(setInterval needs a function passed to it, in that case it is an arrow function)

Note that the above would probably look jittery.
Decreasing the interval will make it update faster, but may decrease performances.
Increasing the rotation will make it turn quicker.
Fiddle with these two values and you should get what you want.

To stop it,

clearInterval(rotateId);

Upvotes: 1

user1931858
user1931858

Reputation: 10656

You can use JavaScript timer (window.setInterval) for rotating by changing the heading at each time interval. Here is a quick example: Rotating Street View Panorama using Google Maps

Upvotes: 4

Related Questions