How can I fix style problems with a google map's info window?

By default, a Google Map infowindow has really nasty style, such that the inner content overlaps the close button when a scrollbar is present:

Google, by their infinite wisdom, don't do anythin开发者_如何学Gog as nice as using classes on their elements, so that makes styling the info window very difficult. Does anyone know how I can fix this overlap problem?

You will need to wait until google has created the content before you try and manipulate the CSS.

google.maps.event.addListener(marker, "click", function () {
    infoWindow.open(googleMap, this);
    setTimeout(reposition, 500);
});

function reposition() {
    $(SELECTOR FOR YOUR CONTENT DIV).parent().parent().css({ top: '24px'});
}

Insert your own div with id and class into the window and style it; if you want even more control, get its parent (through document.getElementById("yourdiv").parent) and manipulate its CSS through DOM (e.g. reset the overflow property).