Slow down google panTo function - google-maps

Question

I have a map that pans from point to point around a map as markers are dropped on the map. The issue I'm having is that the panning is too fast. Is there any way to slow down the panTo function?
Thanks,
Chris

Answer 1

Sadly, no, you cannot change the speed of the panTo animation.
The function only takes a single latlng argument. Details here: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

Answer 2

I write my own implementation of panTo. Using class "EasingAnimator".
var EasingAnimator = function(opt){
opt = opt || {};
this.easingInterval = opt.easingInterval;
this.duration = opt.duration || 1000;
this.step = opt.step || 50;
this.easingFn = opt.easingFn || function easeInOutElastic(t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
};
this.callBack = opt.callBack || function(){};
};
EasingAnimator.makeFromCallback = function(callBack){
return new EasingAnimator({
callBack: callBack
});
};
EasingAnimator.prototype.easeProp = function(obj, propDict){
propDict = propDict || {};
var self = this,
t = 0,
out_vals = JSON.parse(JSON.stringify(obj));
clearInterval(self.easingInterval);
self.easingInterval = setInterval(function(){
t+= self.step;
if (t >= self.duration) {
clearInterval(self.easingInterval);
self.callBack(propDict);
return;
}
var percent = self.easingFn(t, 0, 1, self.duration);
Object.keys(propDict).forEach(function(key, i) {
var old_val = obj[key];
out_vals[key] = old_val - percent*(old_val - propDict[key]);
});
self.callBack(out_vals);
}, self.step);
};
Now you can control everything including duration, steps and of course the easing function. Here are some nice examples of it http://easings.net/. And now you can use it some like this:
dom_elem.addEventListener('click', function(event){
var point = map.getCenter();
easingAnimator.easeProp({
lat: point.lat(),
lng: point.lng()
}, points[i]);
});
Here you can find live demo of how it works
http://codepen.io/ErDmKo/pen/Jdpmzv

Answer 3

I wrote a function to implement a "slow pan" with Google Maps API v3. It uses small pan steps as well as the previous answer, though I think the implementation is a bit simpler. You may use an easing function for f_timeout().
Parameters
map: your google.maps.Map object
endPosition: desired location to pan to, google.maps.LatLng
n_intervals: number of pan intervals, the more the smoother the transition but the less performant
T_msec: the total time interval for the slow pan to complete (milliseconds)
var slowPanTo = function(map, endPosition, n_intervals, T_msec) {
var f_timeout, getStep, i, j, lat_array, lat_delta, lat_step, lng_array, lng_delta, lng_step, pan, ref, startPosition;
getStep = function(delta) {
return parseFloat(delta) / n_intervals;
};
startPosition = map.getCenter();
lat_delta = endPosition.lat() - startPosition.lat();
lng_delta = endPosition.lng() - startPosition.lng();
lat_step = getStep(lat_delta);
lng_step = getStep(lng_delta);
lat_array = [];
lng_array = [];
for (i = j = 1, ref = n_intervals; j <= ref; i = j += +1) {
lat_array.push(map.getCenter().lat() + i * lat_step);
lng_array.push(map.getCenter().lng() + i * lng_step);
}
f_timeout = function(i, i_min, i_max) {
return parseFloat(T_msec) / n_intervals;
};
pan = function(i) {
if (i < lat_array.length) {
return setTimeout(function() {
map.panTo(new google.maps.LatLng({
lat: lat_array[i],
lng: lng_array[i]
}));
return pan(i + 1);
}, f_timeout(i, 0, lat_array.length - 1));
}
};
return pan(0);
};