Google Maps Javascript API V3 - Continuous Panning

Question

I'm trying to get Google Maps to continuously pan smoothly over unless the user moves the mouse over the map. Using the 'idle' event handler causes a choppy pan animation. Using other events won't give me results. Recursion of my initPan() function is just causing the page to crash. Example of the 'idle' continuous pan method here .

function initialize() {
    var myOptions = {
        zoom: 5,
        center: markers.sanjose,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

    google.maps.event.addListener(map, 'idle', function() {
        initPan(map);
    });

    google.maps.event.addListener(map, 'mouseout', function() {
        stopPan(map);
    });
}

function initPan(map) {
   map.panBy(5, 0);
}

function stopPan(){
}

Answer 1

Not a lot of views, no comments, but here's my solution if anyone ever comes across this kind of situation.

In triggering repeating methods by user events, such as panBy() , I ran into problems with API V3. While V2 had the 'moveend' event, it was replaced with the 'idle' event. However, 'idle' has a short delay after the pan occurs. Another option is to use the 'bounds_changed' event, but this event fires multiple times per second, causing the map to never load tiles (hence no panning appearance).

I finally solved this issue by adding a timeout delay to the 'bounds_changed', clearing the timeouts that would stack on the multiple event triggers. This is the code snippet that solved the issue.

google.maps.event.addListener(map, 'bounds_changed', function() {
  if (moving) {
    if (myTimeout) {
      window.clearTimeout(myTimeout);
    }
    myTimeout = window.setTimeout(initPan(map), 2200);
  }
});

I found the solution on the API forum , and you can see an example of my working continuous panning here . And if this isn't making any sense, look at the full code on the example, and good luck.