Drawing a Subview on top of a Google Map Displayed in a WebView on OSX

Question

I'm trying to make a simple utility in OSX that renders a Google Map in a WebView and displays some views on top of it. For most websites, including links to maps.google.com, the subviews will render on top of the WebView. Sweet. But if I use the Google Maps API v3, for some reason the map content will render over my subviews.

Here's an example:

I have a window with two subviews, a WebView, and an NSButton. The order is such that the button should be on top. I placed the button so half of it is over the WebView to make the example clearer.

If I load up

maps.google.com/maps?q=-33.86818,+151.1963

... the button appears on top of the view:

http://dl.dropbox.com/u/22329586/1_webviewproblem_works.png

But if I load up this google demo

gmaps-samples-v3.googlecode.com/svn/trunk/draggable-directions/draggable-directions.html

...which uses the Google Map API v3, it renders over the content:

http://dl.dropbox.com/u/22329586/2_webviewproblem_doesnt_work.png

(Sorry, I don't enough reputation points to post the images inline)

Any ideas?

Answer 1

try to set [view setWantsLayer:YES] on both views and superview. It may help.

a small note, why that helps:

Cocoa docs says:

For performance reasons, Cocoa does not enforce clipping among sibling views or guarantee correct invalidation and drawing behavior when sibling views overlap. If you want a view to be drawn in front of another view, you should make the front view a subview (or descendant) of the rear view.

if you use NSViews without layer backing enabled setWantsLayer:YES, and one of the views is occasionally layer backing or layer hosting or OpenGL view, it will be drawn over all others.

but when you enable layer backing in views, they all are drawn in CALayer hierarchy that supports overlapping.