Clay’s Blog

I ran into a problem the other day when trying to resize the ‘infoWindow’ on a Google Map. The infoWindow is the bubble that appears on the map, usually above a pin-marker when you click on it. Google’s own map has this behavior.

As usual, my solution requires some YUI components. I think you’ll just need the selector module and the core.

The problem I was running into, was that Google provides no way for the infoWindow to be resized. The easiest thing would have been for google to add CSS classes onto all the divs that make up the infoWindow but for some reason, they haven’t provided this and you need to jump through hoops if you really want to resize it. Typically, it seems that people would like to shrink the height because, for some reason, google will not resize it any lower than about 60px, even if the content is much small. In my case, I had only two lines in the infoWindow and a bunch of ugly whitespace below.

You can use the infoWindow.reset method, but the first three parameters are actually required despite what the API seems to imply.

“Resets the state of the info window. Each argument may be null and then
its value will not be changed from the current value.”

This is WRONG. Only the last two arguments are options, which you can tell by the ‘?’ in the method signature on the left.

“reset(latlng:GLatLng, tabs:GInfoWindowTab[], size:GSize, offset?:GSize, selectedTab?:Number)”

If you got this far, then perhaps you might have tried showing the infoWindow and then resetting it to the size you wanted, however, this will only work if you put your call to the reset method into the onOpenFn of the infoWindowOptions. It seems that when the info window is shown it is animated and then resized itself, so if you call the reset method directly after calling openInfoWindow it will animate and then resize AFTER your reset has already done your resizing… However, even this will not let you make the infoWindow’s height any smaller than about 60 px as I mentioned above, don’t worry though, we’ll get there!

Code to resize the infoWindow TALLER than 60px:

If you want ot make the infoWindow SMALLER, then the reset method will not work! Why? No one knows… There’s probably a hard-coded minimum height somewhere in google’s code but their documentation doesn’t seem to mention it anywhere.

The infoWindow is made from a handful of divs that are absolutely positioned in the appropriate places. These divs are for the 4 corners and the top, bottom and middle, sorta like a tic-tac-toe board but with one div for the middle row. By manipulating all these div’s style.top appropriately and the height of the middle div, we can actually shrink the infoWindow despite Google API’s best effort to get in our way!

Code to resize infoWindow with a small height:

Be sure to change the css selector to the appropriate id of the div that contains your map! mine was area-map-tool!

I have not tested this EXACT code but will hopefully get a demo working here soon. Please let me know if you find any problems!
Cheers!

Tags: API, Google Map, height, infoWindow, reset, resize, size

This entry was posted on Friday, March 27th, 2009 at 12:51 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.