I've recently finished conducting research (and a few experiments) with customising the Google Maps (GM) popup "GInfoWindow" window and wanted to share the results. The GInfoWindow is the window which is typically displayed when you click on a GM pin, and one of the key questions that is often asked is how customizable is this window framework? My thoughts  :

The actual HTML structure and code framework of the default GM popup window appears fixed and is controlled internally within the GM API code

  • As such, it will not be easy to alter colours or styles of the white bubble itself, particularly if you want to leverage the tab functionality provided (Blog comments seem to indicate that attempting to alter the CSS of the bubbles leads to strange results)
  • It appears capturing standard DOM events on tabs is not very easy, such as onclick or onmouseover, using this implementation. This means that it's not easy to change the colour or style when clicking or hovering over a tab
  • The basic size of the InfoWindow can be altered, as can the tab width (and allowable characters), but anecdotal blog information would indicate this isn't as flexible as it should be
  • The main content of the InfoWindow can contain any HTML with any style. However, the HTML will always be surrounded by the GM bubble and it's white border
  • This default tabbed InfoWindow handles a lot of the basic window functionality internally, and is easy (and hence time efficient) to code

There are open source implementations of custom InfoWindows which the popup window to be styled in any manner required

  • For cool examples have a look @ http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/examples/cssSkins.html
  • Using this approach you have complete control over the popup functionality, and can capture mouse events such as clicking and hovering
  • With a quick inspection it looks like there will be substantially more programmatic work required if you do use these custom InfoWindows, especially if you want tabs, as you have to code the tab framework yourself (re-inventing the wheel to some degree)

The decision to implement (or not) your own InfoWindows using open source frameworks also has other plus and minus points in relation to being coupled (tied-into) Google's API and code

  • Implementing your own code means that you will be less coupled to Google changes (for example, Google rolls out new code quite often which isn't always fully backward compatible, and can cause existing pages to look strange)
  • On the flip side of this, being less tied into Google means that you could spend a long time implementing your own windows only to find that you end up throwing the work away when Google changes the GM API or releases it's own all-singing-and-dancing version of customisable InfoWindows next month...

More info and an API reference can be @ http://code.google.com/apis/maps/documentation/reference.html#GInfoWindow

My personal recommendation would be to utilise the open-source frameworks and code some of the InfoWindow functionality yourself as this essentially unshackles the design. However, as this could require a lot more development time ultimately it's a decision that needs to be deliberated.

I hope this helps, and if it does then please let me know!

Daniel

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Daniel Bryant (Director) | Tai-Dev Ltd www.tai-dev.co.uk - IT Consultancy Services Specialising in JEE, Web 2.0 and RDBMS