Google Maps API v3: Custom styles for infowindow

Update: Refer to this answer for the state of the infobox source code migration to github.

---

How about using the Infobox plugin rather than using the usual Infowindow? I put up a complete example in a jsfiddle example here. The main thing about the infobox is that you can create your infobox within your page’s html, giving you complete control over how it looks using css (and some javascript options, if necessary). Here’s the html for the infobox:

<div class="infobox-wrapper">
    <div id="infobox1">
        Infobox is very easy to customize because, well, it's your code
    </div>
</div>

The idea here is the "infobox-wrapper" div will be hidden (i.e., display:none in your css) and then in your javascript you will initialize an Infobox object and give it a reference to your “infobox” (inside the hidden wrapper) like so:

infobox = new InfoBox({
    content: document.getElementById("infobox1"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.75,
                width: "280px"
        },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
});

This is just an example of some of the available options. The only required key is content – the reference to the infobox.

And to open the info window:

google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
});

And to further demonstrate the flexibility of the InfoBox, this jsfiddle has an image with a css transition as the “info box”.

And one final tip: Don’t use the class “infobox” in your html. It is rather unfortunately used by the plugin when the infobox is actually generated.