CODEWITHSUNDEEP
javascriptgoogle-mapsevent-handling
Marc Ripley
Marc Ripley

Reputation: 813

Google Maps Javascript API V3 - Continuous Panning

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(){
}

Upvotes: 0

Views: 2358

Answers (1)

Marc Ripley
Marc Ripley

Reputation: 813

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.

Upvotes: 5

Related Questions