Tips on using the Google Maps San Francisco Earthquake page. And the story behind it. 

by Brian Morearty
April 14, 2006

The Tips

Have fun. Look around. See where the airplane is going. Drag the map with your mouse. Zoom in. Zoom out. Shake it all about.

Those cable cars are running along the real Powell-Hyde and California St. lines. Zoom in real close and you'll be able to see that it's true. If you live in the Bay Area and haven't been on a cable car in a while (I understand—the locals never go on the tourist attractions), do yourself a favor and do it. Bring a visiting relative if you need an excuse. They are so much fun. If you don't believe me, ask my father-in-law. He was a San Francisco cable car mechanic for 30+ years.

It works best in Internet Explorer or Safari. Firefox flickers way too much when the cable cars etc. move on the map. I haven't tried it with IE on the Mac or Opera. Or WebTV. (Remember that?)

The longer you let it run, the more memory your browser will use. Navigate away from the page or close your browser to free up the memory. After 5 minutes, the SFFD puts out the fires and the only thing still moving is the airplane. I did that because of the memory problem—I didn't want anyone's computer to get all breaky on me. (The cable cars had already broken down when the quake hit. They came off the tracks.)

For techies in the audience: I think Google Maps is using up some memory every time I move an icon, and keeping a reference to it for some reason so JavaScript's garbage collector can't free it up. Either that or my code has a bug. Since I was trying to get this done in a hurry and JavaScript has garbage-collection, I didn't bother trying to cache the map markers. I just keep recreating them. I bet if I cache them the memory usage will go way down.
Update: I tried caching them. It did decrease the rate at which memory was consumed, but it also caused the status bar to flicker like crazy with "loading plane.png" and made the cursor flicker too. It looked horrible. So I didn't upload the fix.

Hit the S key if you would like to Start and Stop the shaking.

How it began

On April 6, 2006, I was sitting looking out the window daydreaming when it dawned me that it might be possible to make a Google map shake like an earthquake. Huh huh, cool, I thought. When I realized there were just 12 days til the 100th anniversary of the 1906 quake, I figured I'd better get cracking!

Learning the Google Maps API was ridiculously easy. Kudos to the guys down the street on making such an easy API. Within an hour of sitting down, I not only had a map on my page but I also had it shaking. Because Google Maps does smooth scrolling, the look was awesome. I was inspired.

After that, the going got a bit tougher. it took six long evenings and two whole weekend days to get the whole thing done to perfection—drawing the cute icons, coloring them in PhotoShop, making the drop shadows, figuring out exactly the right anchor point for each icon (that's the point where the icon "touches" the map—e.g., for a pushpin icon it would be the tip of the pin), writing the code to move icons across the map, testing on IE and Firefox and Safari. It's been about six years since I wrote any JavaScript (I mostly used C++ and more recently C#) so I had my trusty old JavaScript Bible by my side the whole time. Damn good book, by the way.

Why I did it

Fun. Whizz. Whee!

Credits

Thanks to DonkeyMagic Google Map Maker, without which it would have been pretty dang hard to place those landmarks in exactly the right spots! By the time I learned of this site I had already taught myself how to write the code to add icons to the map. But DonkeyMagic made it easy to just click on a spot (like the corner of California & Market) and get its exact latitude and longitude. Then I copied n pasted it into my page.

Thanks to my beautiful wife Kathleen for putting up with my late nights while I did this.

Thanks for my brother Mike for telling me about the DonkeyMagic site and some cool JavaScript stuff like JSON. I didn't end up using JSON but it helped me figure out how to quickly set all elements of a structure in JavaScript.