SO 21466762

Google Maps API - Place animation

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 600px;
    width: 600px;
    background-color: gray;
}

JavaScript

function initialize() {
    var origin = new google.maps.LatLng(37.774, -122.419),
        dest = new google.maps.LatLng(36.114, -115.172),
        canvas = document.getElementById("map-canvas"),
        options = {
            center: origin,
            zoom: 8,
            mapTypeControl: false
        };

    google.maps.visualRefresh = true;
    var map = new google.maps.Map(canvas, options);

    google.maps.event.addDomListenerOnce(map, 'idle', function () {
        panTo(map, dest, 5000);
    });
}


function panTo(map, dest, delay) {
    var GOOGLE_PAN_DELAY = 10,
        /* the native Google Maps milliseconds */
        cycles = delay / GOOGLE_PAN_DELAY,
        interval = delay / cycles,
        origin = map.getCenter(),
        waypoints = [],
        temp,
        lat,
        lng;

    // compute the change in lat/long, and divide across N cycles
    lat = (dest.lat() - origin.lat()) / cycles;
    lng = (dest.lng() - origin.lng()) / cycles;

    // starting at origin, add N-1 intermediate waypoints that are equidistance apart
    temp = origin;
    for (var i = 0; i < cycles - 1; i++) {
        temp = new google.maps.LatLng(temp.lat() + lat, temp.lng() + lng);
        waypoints.push(temp);
    }
    // make sure the last waypoint is the actual dest
    waypoints.push(dest);

    function pan() {
        var waypoint;

        if (waypoints.length === 0) return;

        waypoint = waypoints.shift();

        map.panTo(waypoint);

        window.setTimeout(pan, interval);
    }

    pan();
}


google.maps.event.addDomListener(window, 'load', initialize);