CODEWITHSUNDEEP
cssgoogle-maps
Bobby Jack
Bobby Jack

Reputation: 16049

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:

alt text

Google, by their infinite wisdom, don't do anything 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?

Upvotes: 2

Views: 980

Answers (2)

jamesg
jamesg

Reputation: 31

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'});
}

Upvotes: 3

Piskvor left the building
Piskvor left the building

Reputation: 92772

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).

Upvotes: 0

Related Questions