You’d think it would be easy to change the stacking order of things you overlay in Google Maps, right? Like, no one wants that stupid AC Transit logo to go underneath the polygon they drew . . . . . you’d think . . . .

Anyways, after like five or six hours of poking around on forums I found a solution.

First, it turns out that overlays on Google Maps have both a ZIndex and a “GPane” associated with them. If you change the ZIndex, you change the order in which objects on the same pane are displayed. Turns out that polygons and ground overlays (like the AC Transit image) are automatically added to the same pane, so no help there.

Here’s the magic. Google lets you create custom overlay classes, where you can specify GPanes for individual images or whatever. But it looks really hard, and I’m lazy.

So I stole this js class that does basically what I want. Just replace the following snippit of code

map.getPane(1).appendChild(div);

with this one

map.getPane(Some higher number, like 7).appendChild(div);

and you’re good to go.