why is google's infoWindow CSS not exposed? customization is too hard

Question

This really bugs me - a lot.

After wading through google maps v3 generated client side code in firebug, I'm about ready to drive down the street and give some of these engineers a piece of my mind... arrrgh :P

The infowWindow class produces HTML that personally I would think is simply nuts. maybe someone can help me make sense of it.

The infowWindow HTML structure is like this:

#map_canvas > div > div > div > div > div // 5 levels of elements, 
no big deal here, ok...
> div // top left corner
div // top right corner
div // bottom left corner
div // bottom right corner

// now comes fun stuff for the speech bubble arrow:

div
div
div
div
div
div
div
div
div
div

// the 10 divs above are stacked diagonally with odd sizes to make this arrow. 
i'm sorry but WHY?!? is it done like that? I suppose they wanted the user to be 
able to grab the map even right next to the arrow. Think about this: do users 
really need to be able to not grab the arrow? if grabbing the arrow causes map pan, 
as is the case for the shadow images, would that really be a problem?

div // bottom middle for image background border or something
div // top middle
div // middle
div // bottom middle, again
div // entire block of the infoWindow, probably the container
> img // close box
div // center block with the contents of the infoWindow
div // text content container

WOW - thats nuts!

notice there is no real semantic structure, and - gosh, dare I have such an assumption - no class names anywhere, nothing. I figured maybe they have some kind of 9-slice box going on and then produce the arrow separately; I mean, the image sprite in iw3.png sure isn't going to be the problem here.

I dearly hope someone who has an effect on this api comes across this and hopefully google will eventually find a way to solve this such that custom infoWindow visuals are as straightforward as markers.

Thanks for tuning in! happy commenting.

meanwhile I shall use a hack to get to these crazy divs and make them do my bidding.

---

earlier I commented on some other post and I think it shouldn't be too much to ask for a method in the API that lets you use custom UI without resorting to a near-duplication of the whole window object as is currently necessary (see google extension classes v3).

google.maps.infoWindow.setStyle({
  'topleft' : {
    'background' : 'url(images/windowsprite.png) 0 0 no-repeat',
    'width' : '10px',
    'height' : '10px'
  },
  'topRight' : {
     ...etc...
  }
  ...etc...
})

Answer 1

Have you tried InfoBox?

http://googlegeodevelopers.blogspot.com/2010/04/infobox-10-highly-customizable.html

or InfoBubble?

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/

They both give you a bit more control over the appearance of infowindows, while still abstracting some of the complicated parts.

The lack of classes on elements is a (good) design decision for an API. It eliminates the potential for clashes with user defined classes.

Answer 2

After much trial and eror I decided the best way to resolve this is to use OverlayView class and simply custom build a container. Well, "simply" is an understatement, but it works. And now I have full control over layout and functionality.