Google Maps API v3: Custom styles for infowindow

Question

I\'ve tried many of the examples from the google maps reference and from other stackoverflow questions, but I haven\'t been able to get custom styles on my infowindow.

Answer 1

If you can't use infobox and need to customise the infowindow you can access it using css. It's not pretty, relies heavily on first:child/last:child psuedo selectors and obviously on whether google ever decides to change their map html structure.

Hopefully the below css can help someone else out in a bind when they're forced to deal with infowindow.

/* white background and box outline */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div
{
    /* we have to use !important because we are overwritng inline styles */
    background-color: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

/* arrow colour */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div > div > div
{
    background-color: #003366 !important; 
}

/* close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child
{
    margin-right: 5px;
    margin-top: 5px;
}

/* image icon inside close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child > img
{
    display: none;
}

/* positioning of infowindow */
.gm-style-iw
{
    top: 22px !important;
    left: 22px !important;
}