Don Havey

I was digging through some Google Maps source code looking for a way to - ahem - repurpose the colors in the map images (cool project coming soon), when I came across this:
<div style="position: absolute; left: 0px; top: 0px; z-index: 107; cursor: default;">
  <div style="position: absolute; left: 143px; top: 29px; z-index: -4364995; display: none;" class="gmnoprint">
    <div style="overflow: hidden; width: 25px; height: 25px; z-index: 1; position: absolute; left: 0px; top: 0px;">
      <img style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: 0px; width: 690px; height: 786px; -moz-user-select: none;" src="/intl/en_us/mapfiles/iw2.png">
    </div>
    <div style="overflow: hidden; width: 25px; height: 25px; z-index: 1; position: absolute; left: 224px; top: 0px;">
      <img style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: -665px; top: 0px; width: 690px; height: 786px; -moz-user-select: none;" src="/intl/en_us/mapfiles/iw2.png">
    </div>
    <div style="overflow: hidden; width: 98px; height: 96px; z-index: 1; position: absolute; left: 76px; top: 101px;">
      <img style="border: 0px none ; margin: 0px; padding: 0px; position: absolute; left: 0px; top: -690px; width: 690px; height: 786px; -moz-user-select: none;" src="/intl/en_us/mapfiles/iw2.png">
    </div>
    [...]

Anyone else get what’s happening there? They’re using only one image to create that little call-out marker bubble. It’s really quite brilliant. Just one large (but light) png file is repeatedly repositioned to create all of the borders and corners of the bubble, allowing for dynamic sizing without image stretching.

I felt like an archaeologist when I unearthed it… and of course, my first thought was “why didn’t I think of that?”