Animated Invasion over Google Map: gnus and mozillas are attacking Bill Gates' office in Redmond

In case you don't see it, check the Flash Animation.
Push CTRL+U and have a look at the code and improuve it! (I assume you are using Firefox).
Otherwise, the code is below.

Animated Invasion over Google Map: some Mozillas and some Gnus are invading Microsoft office in Redmond (the blue E). Update: Click and you create a new invader.
I saw on BoingBoing that Vestadesign created Star Wars ATATs attacking Palo Alto using Google Maps API. So I thought I could add some animation. I also ended up changing the environment (Micro$oft offices) and the invaders (Mozillas and Gnus). Free software to the rescue! ;-)

It should be very easy to create real playable games on Google Maps. Examples:
- playing Risk on the real world map (with the ability to zoom in/out to combat at different scales). Extend Jrisk or JavaRisk (code available on SourceForge).
- playing FreeCiv on real world maps. Modify FreeCiv source code.
- driving a car race on streets of the real world.
- much more I guess ... Let me know if you create something by linking to this page
UPDATE: after being BoingBoinged, I created a Games on Google Maps wiki page, for collecting ideas (and implementations!). Contribute to it, if you like.

paolo

The code for the example is below. Play with it. It is released under GPL.

<script type="text/javascript">
    //<![CDATA[

if (GBrowserIsCompatible()) {
    //
    // inspiration and some code from http://www.vestaldesign.com/maps/starwars.html
    // -- paolo http://moloko.itc.it/paoloblog/
    //
		var map = new GMap(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setMapType(_SATELLITE_TYPE);
		// Center the map on Microsoft Office [1, Microsoft Way, Redmond, Washington, USA]
		var explorerX=-122.130547;
		var explorerY=47.645846;
		var explorerPoint=new GPoint(explorerX, explorerY);
		map.centerAndZoom(explorerPoint,0);
		
		// Create gnu marker icon
		var gnuIcon = new GIcon();
		gnuIcon.image = "gnu.png";
		gnuIcon.shadow = "shadow50.png";
		gnuIcon.iconSize = new GSize(70, 95);
		gnuIcon.shadowSize = new GSize(40, 53);
		gnuIcon.iconAnchor = new GPoint(6, 20);
		gnuIcon.infoWindowAnchor = new GPoint(5, 1);

// Create mozilla marker icon
		var mozillaIcon = new GIcon();
		mozillaIcon.image = "mozilla.png";
		mozillaIcon.shadow = "shadow50.png";
		mozillaIcon.iconSize = new GSize(70, 70);
		mozillaIcon.shadowSize = new GSize(40, 53);
		mozillaIcon.iconAnchor = new GPoint(6, 20);
		mozillaIcon.infoWindowAnchor = new GPoint(5, 1);

// Create our explorer marker icon
		var explorerIcon = new GIcon();
		explorerIcon.image = "ie.png";
		explorerIcon.shadow = "shadow50.png";
		explorerIcon.iconSize = new GSize(40, 44);
		explorerIcon.shadowSize = new GSize(80, 103);
		explorerIcon.iconAnchor = new GPoint(6, 20);
		explorerIcon.infoWindowAnchor = new GPoint(50, 1);	
		
		// Get some measures about current map dimensions
		var bounds = map.getBoundsLatLng();
		var width = bounds.maxX - bounds.minX;
		var height = bounds.maxY - bounds.minY;

// Place on the map the Explorer icon (with click listener)
		explorerMarker=new GMarker(explorerPoint,explorerIcon);
		map.addOverlay(explorerMarker);
		GEvent.addListener(explorerMarker, "click", function() {
		      explorerMarker.openInfoWindowHtml("<img height=\"100\" src=\"gates01.jpg\"><br>We are under attack!<br>");
		});

// Place on the map 10 icons (some gnus, some mozillas at random)
		var numberPoints="9";
		var movingPoints=new Array(numberPoints);
		var movingMarkers=new Array(numberPoints);
		for (var i = 1; i <= numberPoints ; i++) { 
			movingPoints[i] = new GPoint(bounds.minX + width * Math.random(),
		                          bounds.minY + height * Math.random());
			var icon;
			if(Math.random()>0.5) {
			    icon=gnuIcon;
			} else {
			    icon=mozillaIcon;
			}
	        	movingMarkers[i]=new GMarker(movingPoints[i],icon);
			map.addOverlay(movingMarkers[i]);
		}

GEvent.addListener(map, 'click', function(overlay, point) {
                  if (overlay) {
                      //                      map.removeOverlay(overlay);
                      // I would like to remove the overlay and it works
                      // but the cycle of movement steps re-add it.
                  } else if (point) {
		      var icon;
		      if(Math.random()>0.5) {
			    icon=gnuIcon;
		      } else {
			    icon=mozillaIcon;
		      }

tmpMarker=new GMarker(point,icon);
                      movingPoints.push(point);
                      movingMarkers.push(tmpMarker);
                      map.addOverlay(tmpMarker);
                  }
                });

//The icons move toward the Big E in the center of the map (plus some random perturbation)
                 var movement=0.0003;
		 numberSteps=30;
		 for (var step = 1; step <= numberSteps ; step++) { 
		    window.setTimeout(function() {
		      for (var i = 1; i <= movingPoints.length ; i++) { 
		 	movingPoints[i].x+=((explorerX-movingPoints[i].x)/15+Math.random()*movement-movement/2);
		 	movingPoints[i].y+=((explorerY-movingPoints[i].y)/15+Math.random()*movement-movement/2);
			map.removeOverlay(movingMarkers[i]); 
			map.addOverlay(movingMarkers[i]); 
		      }
		    }, step*1500);
		 }
    }

//]]>
    </script>