by Brian Morearty
April 14, 2006
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
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
For techies in the audience: I think Google Maps is using up some memory every time I move an icon,
can't free it up. Either that or my code has a bug. Since I was trying
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.
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
so I had my trusty old
Fun. Whizz. Whee!
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.
end up using JSON but it helped me figure out how to quickly set all elements of