Link <a> Overlay on a Marker with Google Maps API V3

Question

Dinevore uses markers with links on their maps. To see what I mean, check out this link and toggle on the map view: http://nyc.dinevore.com/restaurants/discover

Upon inspecting the code it looks like they don't use Google Maps marker constructor and instead use a raw span overlay with the marker defined as background of the span. Doing this permits them to place a link in their marker:

<span class="marker">
  <a onclick="infoBoxPop[1].open(map)" style="color: white; cursor: pointer;">1</a>
</span>

The drawback of this approach is that you lose all of the benefits of the marker constructor such as the marker shadow effect on drag'n'drop and marker animations.

Is it possible to achieve the same effect as Dinevore has but using the Google Maps marker constructor with an overlay on top?

The problem I'm having with what I've created so far is getting the Z-index of the link to be place above the z-index of the div that contains the overlay.

When Google maps renders, it first renders the tiles with a z-index of 100, then it renders each subsequent item on the map such as overlays, markers, marker shadows, scale-slider, Google logo, map-source, etc. With each one of these subsequent items, Google increments the Z-index.

So I get

Map

-div

-- z-index: 100 -- (something related to the map tile images)

-- z-index: 101 -- label overlay

-- z-index: 102 -- marker shadow overlay

-- z-index: 103 -- marker image overlay

-- z-index: 104 -- (empty)

-- z-index: 105 -- gmnoprint (i don't know what this is, but it is related to the marker)

-- z-index: 106 -- (empty)

-- z-index: 107 -- map tile images

-div

-- z-index: 12 -- Google logo

-div

-- z-index: 1000 -- source

Is there anyway to get my span label in the div with z-index of 101 to override the it's stacking context and go above 101 or is the only solution to use a javascript hack to change the 101 to 104? For example, by selecting the parent and adjusting the z-index?

Andrew De Andrade Andrew De Andrade · Accepted Answer · 2010-12-22T01:02:22

I figured out what I was doing wrong. As I was basing my code on some code example from someone's blog, I overlooked detail of the "Pane" in which I was rendering the label.

I was rendering the label in the overlayLayer (Pane 1). Instead I should have been rendering it in the overlayImage (Pane 3) and then giving it a z-index greater than that of the marker itself (z-index: 323).

Here is the relevant code:

Label.prototype.onAdd = function() {
  var pane = this.getPanes().overlayImage;
  pane.appendChild(this.div_);

...

With that, my label is rendered in the overlayImage pane and not the overlayLayer pane.

To see what goes in each Pane, see this part of the Google Maps documentation:

http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes

For an explanation of how Z-index works, see this:

http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

Link <a> Overlay on a Marker with Google Maps API V3

1 Answers