I'm using Google Maps info window which gets populated with the text from 3 input fields. First input field is TITLE, second ADDRESS (uses standard Google autoplete) and third DESCRIPTION. So everything looks user friendly I added <br/> between them so each input is shown separated in info window. This is how i did it:

return (name || "") + "<br/>" +
       (addressOrCoordinates || "") + "<br/>" +
       (additionalDetails || "");

But when address is just little bit longer vertical scroll appears, which is weird because if you write 300 characters in description field, info window doesn't show vertical scroll, it nicely adapts infowindow size...

So i tried removing <br/> and everything works without vertical scroll even if address is miles long. So I thought that <br/> is messing with address, so i tested litlle bit more and it seems address is affected with <br/> if its infront of adress but not if its after...

So it seems if infowindow contains normal text it dosent show verticall scroll even if there is alot of text and even if this text is separated with <br/> but why does verticall scroll apperas when using <br/> infront of the adress? Is there any other way i can make adress input go to new line in infowindow without this verticall scroll appearing?

BTW CSS overflow doesn't work and I'm using API v3

I'm using Google Maps info window which gets populated with the text from 3 input fields. First input field is TITLE, second ADDRESS (uses standard Google autoplete) and third DESCRIPTION. So everything looks user friendly I added <br/> between them so each input is shown separated in info window. This is how i did it:

return (name || "") + "<br/>" +
       (addressOrCoordinates || "") + "<br/>" +
       (additionalDetails || "");

But when address is just little bit longer vertical scroll appears, which is weird because if you write 300 characters in description field, info window doesn't show vertical scroll, it nicely adapts infowindow size...

So i tried removing <br/> and everything works without vertical scroll even if address is miles long. So I thought that <br/> is messing with address, so i tested litlle bit more and it seems address is affected with <br/> if its infront of adress but not if its after...

So it seems if infowindow contains normal text it dosent show verticall scroll even if there is alot of text and even if this text is separated with <br/> but why does verticall scroll apperas when using <br/> infront of the adress? Is there any other way i can make adress input go to new line in infowindow without this verticall scroll appearing?

BTW CSS overflow doesn't work and I'm using API v3

• javascript
• google-maps
• google-maps-api-3
• infowindow

• More than the length of the text or the usage of <br/>s here is important if the text contains characters where the browser can break the line(e.g. a space). This is unclear so far, especially as long as nobody knows what htmlEncode() does. – Dr.Molle Commented Feb 7, 2013 at 14:57
• htmlEncode() is not important for this example. i edited my question and removed it – Dreadlord Commented Feb 7, 2013 at 18:24
• You still didn't say if there are spaces in the string(except of   ). A browser can only break a line at particular characters. – Dr.Molle Commented Feb 7, 2013 at 18:29
• Yes string contains spaces (not  ) – Dreadlord Commented Feb 7, 2013 at 18:36
• same issue here? jsfiddle/doktormolle/UPWAK – Dr.Molle Commented Feb 7, 2013 at 19:23

4 Answers 4

This appears to be one of the craziest bugs I've seen for a long time.

I can't tell you why this happens, but for me it works when I remove the bold marked part(font-family) of the followingCSS:

#mapE { text-align:center; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:14px; overflow:hidden; }

It's not a problem of the width of the font(there e.g. is no problem when I use Verdana, which is much wider than Arial).The API must calculate the size of the infoWindow before it opens, it seems that this is the point where something went wrong when using Arial.

So I would suggest to use another basic windows-font than Arial(Tahoma should be fine, no issue there for me)

So I was in a similar situation as you were. I wanted the content inside my infoWindow to scroll (just Y scroll not X scroll) but I wanted to disable the automatic google API infoWindow scroll because it was covering up my content. Like many people I wrapped my infowindow content in a div and gave it an id #info_window. Then I wanted to make sure that the content had a maxheight and was arranged so that its scroll bar didn't cover the content (and I needed the scroll bar to only scroll vertically, another consideration). Finally, I used one of the answers found here to ensure that only MY scroll bar was showing up not the automatic google one. So my CSS ended up looking like this:

#info_window{
  width: 350px;
}

.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
  max-height: 280px;
  padding: 0px 10px 5px 5px;
  overflow-y: scroll;
  overflow-x: visible;
}

.gm-style-iw div {
  overflow:visible !important;
}

this also works if you add it to your CSS:

.gm-style-iw div {overflow:visible !important;}

depending on the content of your infowindow, it removes the ugly vertical scroll bars pletely. It overwrites the puted style provided by the google api.

I have found that adding white-space: nowrap; to the content of the infowindow also seems to solve problems with the scrollbars. Whether this is a viable option of course depends on the actual content, but it might be an option.