Animations with Google Maps

The following provides an example of Maps layer animations integrated with the Google Maps (opens in a new tab) library. For an example using our JS SDK, please visit the Xweather Javascript SDK docs.
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Google Maps Animation - Xweather Raster Maps</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
 
<div id="map"></div>
 
<script>
let map;
 
const frameCount = 10; // total intervals
const startMinutes = -60; // start time offset relative to now, where negative means past
const endMinutes = 0;
 
const AERIS_ID = 'CLIENT_ID';
const AERIS_KEY = 'CLIENT_SECRET';
const NUM_COLORS = '256'; // set to empty string for true color png
const TILE_SIZE = 256;
 
// layer to include on the map
// uncomment more layers or add more!
const layers = [
    // 'alerts',
    // 'satellite',
    'radar',
    'stormcells'
];
 
function getTileServer(stepNumber, layers, opacity = 0) {
    const interval = (endMinutes - startMinutes) / frameCount;
    const timeOffset = startMinutes + interval * stepNumber;
    const layerStr = layers.join(',');
 
    return {
        getTileUrl: (coord, zoom) => {
            const server = Math.abs(coord.x + coord.y) % 4 + 1;
            return `https://maps${server}.aerisapi.com/${AERIS_ID}_${AERIS_KEY}/${layerStr}/${zoom}/${coord.x}/${coord.y}/${timeOffset}min.png${NUM_COLORS}`;
        },
        tileSize: new google.maps.Size(TILE_SIZE, TILE_SIZE),
        opacity:  opacity
    }
}
 
window.addEventListener('load', () => {
    // initialize map
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 43.0, 
            lng: -93.0
        },
        zoom: 5
    });
 
    // set up the animation frames and layers
    const frames = [];
    for (let i = 0; i < frameCount; i += 1) {
        const opacity = (i === 0) ? 1 : 0;
        frames.push(new google.maps.ImageMapType(getTileServer(i, layers, opacity)));
        map.overlayMapTypes.push(frames[ i ]);
    }
 
    // wait time determines how long to wait and allow frames to load before
    // beginning animation playback
    const waitTime = 5000;
 
    // step time determines the time in milliseconds each frame holds before advancing
    const stepTime = 1000;
 
    let currentOffset = 0;
    let previousOffset = currentOffset;
 
    setTimeout(() => {
        setInterval(() => {
            previousOffset = currentOffset;
            currentOffset += 1;
            if (currentOffset === frames.length - 1) {
                currentOffset = 0;
            }
            frames[previousOffset].setOpacity(0);
            frames[currentOffset].setOpacity(1);
        }, stepTime);
    }, waitTime);
});
</script>
 
<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY" async defer></script>
 
</body>
</html>
Animating with Mapbox Animating with Leaflet