How can I make a Google Maps custom Overlay object behave like an InfoWindow?

Question

My only problem with the InfoWindow is that I don't have a way to customize it's appearance (ie, the bubble, not it's contents). It seems that the only way to do that is to make my own Overlay and style that instead. But that gives me problems such as not being able to select text (dragging the mouse over this overlay just pans the map) or scroll (if the overlay has a div with overflowing text then scrolling causes the map to zoom in or out, clicking on the scroll bar will scroll but it will pan the map at the same time).

I'm currently catching the mouseover and mouseout events to disable/enable dragging and zooming but I still can't highlight text and now scrolling the mouse wheel on an area of the overlay that doesn't have anything to scroll causes page elements outside of the map to move up the window.

Has anyone else run into a situation like this? I haven't seen anything else that actually covers this and I'm trying not to tear out my hair trying to find a solution.

Answer 1

Maybe you can hack your way around the problem of not being able to customize the bubble by creating content that uses relative CSS positioning to hide/overwrite the bubble?

Also, (a shot in the dark), I'm not sure, but could you maybe customize a marker and subvert it into a sort of InfoWindow?

Answer 2

Great news. It looks like the problem I was experiencing in Firefox was due to my overlay being larger in height than the map container and assuming that Google Maps was setting

overflow: hidden

somewhere (I guess not). Setting it myself fixed that. The next step is to have your overlay container catch the click events and make sure that they aren't propagated as shown in the ExtInfoWindow code: http://gmaps-utility-library.googlecode.com/svn/trunk/extinfowindow/1.0/src/extinfowindow.js (near the end of initialize).