Can Google Maps be set to a slow constant pan? Like a globe revolution?

Question

Just what the title says. I am searching for a solution but I have not found anything that has guided me to the correct documentation or articles.

If you have any ideas or can point me to a possible solution I can work with, it would be greatly appreciated.

Thanks

Answer 1

You can do this yourself like this:

• Use setInterval to set up a function to be run periodically.
• The function would call panBy on the Google map object to "rotate" it a bit.

That should give you a simple animation that does what you want. You'd want to adjust the time interval that you give to setInterval to get something that feels smooth of course. You should have something like this:

// Create your map and leave it in the "map" variable.
setInterval(function() {
    map.panBy(x, 0);
}, n);

Choosing appropriate x and n values is up to you.

Answer 2

The accepted answer is ok, but a little outdated. Instead of window.setInterval you shoud use window.requestAnimationFrame. This will give you a smoother animation.

A simple example (not from me) can be found here, but the gist of it looks something like this:

var map = new google.maps.Map(document.getElementById('my-map'), mapOptions)
function animate () {
  map.panBy(2.5 / 2, 1.3 / 2)
  window.requestAnimationFrame(function () {
    animate()
  })
}
// eslint-disable-next-line
google.maps.event.addListenerOnce(map, "tilesLoaded", function () {
  window.requestAnimationFrame(function () {
    animate()
  })
})
window.requestAnimationFrame(function () {
  animate()
})