Custom Overlay Z Index

3,114 views
Skip to first unread message

garethhowell

unread,
May 8, 2011, 1:25:58 PM5/8/11
to Google Maps JavaScript API v3
Hi

I have created a custom map, which shows an old map which can be
toggled on/off, using a custom overlay.

The map also calls a marker at the center of the map, which has an
info window.

The problem is that the marker appears behind the custom overlay, and
is only visible when the map is toggled off (showing the satellite
view underneath).

You can see it here

http://tmoi.org.uk/catalogue.html?page=shop.product_details&flypage=flypage-ask.tpl&product_id=624&category_id=337

I have tried setting zindex both on the marker and the overlay but to
no avail. Does anybody have any clues as to how I might fix this?


Apologies if this is posted elsewhere, but I have searched around for
ages and found nothing!

Gareth
Best

Gareth Howell

Esa

unread,
May 8, 2011, 3:58:37 PM5/8/11
to Google Maps JavaScript API v3
z-index arranges front/behind appearance of child nodes inside a
parent node. If the parent node is behind another node, no z-index
will bring a child on front that another node.

I guess you have to adjust the 'pane' of your custom overlay.
http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes

garethhowell

unread,
May 8, 2011, 6:18:36 PM5/8/11
to Google Maps JavaScript API v3
Thanks for the reply.

I'm afraid i was just being dumb! I needed to set the pane to be a
mapPane rather rather than overlayImage.

Duh! Works fine now
> I guess you have to adjust the 'pane' of your custom overlay.http://code.google.com/apis/maps/documentation/javascript/reference.h...

lmeurs

unread,
Jun 23, 2011, 5:37:18 AM6/23/11
to Google Maps JavaScript API v3
Hey garethhowell,

Thank you for your solution! Today I ran into the same problem, but it
has been a while since I wrote the script, so at first I did not know
what you meant with 'I needed to set the pane to be a mapPane rather
rather than overlayImage'.

For all the other else looking for a quick fix: when you use
USGSOverlay (like Google's sample at
http://code.google.com/intl/nl/apis/maps/documentation/javascript/overlays.html#CustomOverlays),
lookup function USGSOverlay.prototype.onAdd and change the last line
from:

panes.overlayImage.appendChild(div);

to

panes.mapPane.appendChild(div);

Cheers,
Laurens Meurs, Rotterdam
Reply all
Reply to author
Forward
0 new messages