Google Maps API v3 InfoWindow not sizing correctly

Question

It appears my InfoWindow  when you click on the home icon on my Google Maps v3  is not properly auto-sizing to the content of the InfoWindow   It gives scrollbars when it should not  The InfoWindow should be properly auto-sizing   Any ideas on why   Per request  the relevant JavaScript which injects the HTML for the InfoWindow   listing     lt div gt Content goes here lt  div gt      UPDATE  This bug was handled by Google in issue  https   issuetracker google com issues 35823659  The fix was implemented in February 2015 in version 3 19 of Maps JavaScript API

User · Answer

This works for me  Put a div in the setContent  sh map infoWindow setContent       lt div id   mydiv   gt       Your content goes here     join         Then add this CSS to your page    lt style type  text css  gt   map-canvas    text-align  center   vertical-align  middle     mydiv    font-family   Comic Sans MS   cursive   font-size  10px   border-top-width  0px   border-right-width  0px   border-bottom-width  0px   border-left-width  0px   border-top-style  none   border-right-style  none   border-bottom-style  none   border-left-style  none   letter-spacing  normal   text-align  center   vertical-align  middle   word-spacing  normal     lt  style gt    For example  see http   www student-homes-northampton co uk  click the links under the house pics to display the Google map

User · Answer

EDITED  to standout   Trust me  out of the hundred other answers to this question  this is the only correct one that also explains WHY it s happening  Ok  so I know this thread is old  and has a thousand answers  but none of them is correct and I feel the need to post the correct answer    Firstly  you do not ever need to specify width s or height s on anything in order to get your infoWindow to display without scrollbars  although sometimes you may accidentally get it working by doing this  but it s will eventually fail    Second  Google Maps API infoWindow s do not have a scrolling bug  it s just very difficult to find the correct information on how they work  Well  here it is   When you tell the Google Maps API to open in infoWindow like this   var infoWindow   new google maps InfoWindow              infoWindow setContent   lt h1 gt Hello  lt  h1 gt  lt p gt And welcome to my infoWindow  lt  p gt     infoWindow open map     For all intents and purposes  google maps temporarily places a div at the end of your page  actually it creates a detached DOM tree - but it s conceptually easier to understand if I say you imagine a div being places at the end of your page  with the HTML content that you specified  It then measures that div  which means that  in this example  whatever CSS rules in my document apply to h1 and p tags will be applied to it  to get it s width and height  Google then takes that div  assigns the measurements to it that it got when it was appended to your page  and places it on the map at the location you specified   Here s where the problem happens for a lot of people - they may have HTML that looks like this    lt body gt    lt div id  map-canvas  gt  lt  -- google map goes here -- gt  lt  div gt   lt  body gt    and  for whatever reason  CSS that looks like this   h1   font-size  18px     map-canvas h1   font-size  32px      Can you see the problem  When the API tries to take the measurements for your infoWindow  immediately before displaying it   the h1 part of the content will have a size of 18px  because the temporary  measuring div  is appended to the body   but when the API actually places the infoWindow on the map  the  map-canvas h1 selector will take precedence causing the font size to be much different than what it was when the API measured the size of the infoWindow and in this circumstance you will always get scrollbars   There may be more slightly different nuances for the specific reason why you have scrollbars in your infoWindow  but the reason behind it is because of this      The same CSS rules must apply to the content inside your infoWindow   regardless of where the actual HTML element appears in the markup  If   they do not  then you will be guaranteed to get scrollbars in your   infoWindow   So what I always do  is something like this   infoWindow setContent   lt div class  info-window-content  gt    your content here    lt  div gt       and in my CSS    info-window-content          info-window-content h1           info-window-content p         etc      So no matter where the API appends it s measurement div - before the closing body or inside a  map-canvas  the CSS rules applied to it will always be the same   EDIT RE  Font Families  Google seems to be actively working on the font loading issue  described below  and functionality has changed very recently so you may or may not see the Roboto font load when your infoWindow opens the first time  depending on the version of the API you are using  There is an open bug report  even though in the changelog this bug report was already marked as fixed  that illustrates that google is still having difficulty with this problem    ONE MORE THING  WATCH YOUR FONT FAMILIES     In the latest incarnation of the API  google tried to be clever and wrap it s infoWindow content in something that could be targeted with a CSS selector -  gm-style-iw  For people that didn t understand the rules that I explained above  this didn t really help  and in some cases made it even worse  Scrollbars would almost always appear the first time an infoWindow was opened  but if you opened any infoWindow again  even with the exact same content the scrollbars would be gone  Seriously  if you weren t confused before this would make you lose your mind  Here s what was happening   If you look at the styles that google loads on the page when it s API loads  you ll be able to see this    gm-style        font-family  Roboto Arial sans-serif          Ok  so Google wanted to make it s maps a bit more consistent by always making them use the Roboto font-family  The problem is  for the majority of people  the before you opened an infoWindow  the browser hadn t yet downloaded the Roboto font  because nothing else on your page used it so the browser is smart enough to know that it doesn t need to download this font   Downloading this font isn t instantaneous  even though it is very fast  The first time you open an infoWindow and the API appends the div with your infoWindow content to the body to take it s measurements  it starts downloading the Roboto font  but your infoWindow s measurements are taken and the window is placed on the map before Roboto finishes downloading  The result  quite often  was an infoWindow whose measurements were taken when it s content was rendered using Arial or a sans-serif font  but when it was displayed on the map  and Roboto had finished downloading  it s content was being displayed in a font that was a different size - and voila - scrollbars appear the first time you open the infoWindow  Open the exact same infoWindow a second time - at which point the Roboto has been downloaded and will be used when the API is taking it s measurements of infoWindow content and you won t see any scrollbars

User · Answer

I have tried all of these solutions and none worked   After some trial and error I figured it out    lt style type  text css  gt   map canvas       line-height normal     lt  style gt    Set line-height normal for the map canvas div

User · Answer

You should give the content to InfoWindow from jQuery object   var  infoWindowContent       lt div class  infowin-content  gt Content goes here lt  div gt     var infoWindow   new google maps InfoWindow    infowindow setContent  infoWindowContent 0

User · Answer

It wasn t acceptable for me to hard code the width and height of the info window  or to set white-space  nowrap  the maxWidth solution didn t help me and everything else either didn t work or was otherwise inappropriate for my use case   My solution was to set the content  open the window and then when the domready event is fired  set the height CSS property on the content to whatever the height is  and then force Google Maps to resize the InfoWindow accordingly   infoWindow is the InfoWindow object   infoWindowContents is a Jquery object of the contents I want to put in there  map is my Map object  marker is a marker which was clicked   infoWindow setContent  infoWindowContents get 0     var listener   google maps event addListener infoWindow   domready   function          Stop listening  otherwise the listeners stack up if the window is opened again   google maps event removeListener listener         Set the height on the container to however tall the browser is currently rendering it    infoWindowContents height  infoWindowContents height           Force Google Maps to recalculate the InfoWindow height   infoWindow setContent  infoWindowContents get 0         infoWindow open map  marker      I posted the same solution over on a similar question How do I get a google-maps InfoWindow to resize to fit the content that is placed inside of it

User · Answer

I found that any setting of line-height within any of the elements inside the infoWindow content caused this issue  removing the line-height settings solved this for me

User · Answer

Short answer  set the maxWidth options property in the constructor  Yes  even if setting the maximum width was not what you wanted to do   Longer story  Migrating a v2 map to v3  I saw exactly the problem described  Windows varied in width and height  and some had vertical scrollbars and some didn t  Some had  lt br   gt  embedded in the data  but at least one with that sized OK   I didn t think the InfoWindowsOptions maxWidth property was relevant  since I didn t care to constrain the width    but by setting it with the InfoWindow constructor  I got what I wanted  and the windows now autosize  vertically  and show the full content without a vertical scrollbar  Doesn t make a lot of sense to me  but it works   See  http   fortboise org maps sailing-spots html

User · Answer

I had an inline element  an a tag  directly inside of the div with style  overflow auto      wrapped that in a p tag and fixed it   Looks like any inline element that is not nested in a block element directly inside of the infowindow will cause this

User · Answer

If nothing else  try adding the content after the window has been opened   This should force it to resize   infoWindow   new google maps InfoWindow   infoWindow open map  marker  infoWindow setContent content

User · Answer

This solved my problem completely    gm-style-iw       overflow  visible  important      height  auto  important      width  auto  important

User · Answer

I tried most  if not all  answers alone from above but none worked in my case  So i combined a couple of them trying to figure out the minimum i need   And this combination worked for me   div infowindow       font-family  Courier      white-space  nowrap      overflow  hidden       Your milage may vary   good luck

User · Answer

I was having the same issue  particularly noticeable when my  lt h2 gt  element wrapped to a second line   I applied a class to a  lt div gt  in the infoWindow  and changed the fonts to a generic system font  in my case  Helvetica  versus an  font-face web font which it had been using  Issue solved

User · Answer

It appears that the issue is with the Roboto webfont    The infowindow is rendered with inline width and height properties based on the content provided  However  it is not calculated with the webfont already rendered loaded  Once the font is rendered AFTER the entire map is printed to the screen  then it causes the scrollbars to appear due to the  overflow auto  properties inline inside the window s DIVs   The solution I found to work is to wrap the content in a DIV and then apply CSS to override the webfont    gmap infowin       font-family  sans-serif  important      font-weight  normal  important      lt div class  gmap infowin  gt Your info window content here  lt  div gt

User · Answer

Use the domready event and reopen the info window and show the hidden content after the domready event fires twice to ensure all of the dom elements have been loaded       map is created using google maps Map       marker is created using google maps Marker      set the css for the content div  infowin-content   visibility  hidden      infowindow   new google maps InfoWindow        infowindow setContent   lt div class  infowin-content  gt Content goes here lt  div gt     infowindow setPosition marker getPosition     infowindow set  isdomready   false   infowindow open map          On Dom Ready google maps event addListener infowindow   domready   function          if  infowindow get  isdomready                 show the infowindow by setting css          jQuery   infowin-content   css  visibility    visible                             else              trigger a domready event again          google maps event trigger infowindow   content changed            infowindow set  isdomready   true             I tried just doing a setTimeout    show infowin callback     100   but sometimes that didn t work still if the content  ie  images  took too long to load   Hope this works for you

User · Answer

gm-style-iw      height  100   important      overflow  hidden  important      it works for me

User · Answer

Add a min-height to your infoWindow class element   That will resolve the issue if your infoWindows are all the same size   If not  add this line of jQuery to your click function for the infoWindow     remove overflow scrollbars     myDiv   parent   css  overflow

User · Answer

Going to add my answer to the list  since NONE of these fixed my problem  I ended up wrapping my content in a div  giving that div a class  and specifying the min-width on the div  AND specifying the maxWidth on the infoWindow  AND they both needed to be the same size  otherwise either the width or the height would be overflowing on boxes with just the wrong amount of content   Javascript      Set up the content for the info box var content     lt div class  infowindow-content  gt     content     lt  div gt        create a map info box var infoWindow   new google maps InfoWindow       maxWidth  350      content  content       CSS   div infowindow-content       min-width  350px

User · Answer

I tried each one of the answers listed   None worked for me  This finally fixed it PERMANENTLY  The code I inherited had a DIV wrapper around all the  lt h  gt  and  lt p gt  entries   I simply forced some  style  in the same DIV  taking into account a desired max width  threw in the line height change just in case  someone else s fix  and my own white-space  nowrap  which then made the auto overflow make the correct adjustments   No scroll bar  no truncation and no problems   html     lt div class  map-overlay  style  max-width  400px                                          line-height  normal                                          white-space  nowrap                                          overflow  auto                                           gt

User · Answer

Well this is the one that did the trick for me    gm-style-iw gt div       overflow  visible  important      Only setting overflow  visible on  gm-style-iw actually made the problem worse  I noticed in the Chrome developer tools inspector that there are two divs inside the  gm-style-iw element  both which have overflow  auto set by default    I m displaying quite a lot of HTML-formatted text in my InfoWindows  that might be why the other solutions didn t work at all for me

User · Answer

Just to summarize all the solutions that worked for me in all browsers    Don t use margins inside the infowindow  only padding  Set a max-width for the infowindow   this infowindow   new google maps InfoWindow       maxWidth  200     Wrap the contents of the infowindow with   lt div style  overflow hidden line-height 1 35 min-width 200px   gt  CONTENT  lt  div gt    change the min-width for the value you set on the infowindow maxWidth    I have tested it and it worked on every browser  and I had over 400 markers

User · Answer

I know that lots of other people have found solutions that worked for their particular case  but since none of them worked for my particular case  I thought this might be helpful to someone else   Some details   I m using google maps API v3 on a project where inline CSS is something we really  really want to avoid  My infowindows were working for everything except for IE11  where the width was not calculated correctly  This resulted in div overflows  which triggered scrollbars   I had to do three things    Remove all display  inline-block style rules from anything inside of the infowindow content  I replaced with display  block  - I got the idea to try this from a thread  which I can t find anymore  where someone was having the same problem with IE6  Pass the content as a DOM node instead of as a string  I am using jQuery  so I could do this by replacing  infowindow setContent infoWindowDiv html     with infowindow setContent   infoWindowDiv html    0    This turned out to be easiest for me  but there are lots of other ways to get the same result  Use the  setMaxWidth  hack - set the MaxWidth option in the constructor - setting the option later doesn t work  If you don t really want a max width  just set it to a very large number    I don t know why these worked  and I m not sure if a subset of them would work  I know that none of them work for all of my use cases individually  and that 2   3 doesn t work  I didn t have time to test 1   2 or 1   3

User · Answer

After losing time and reading for a while  I just wanted something simple  this css worked for my requirements    gm-style-iw  gt  div   overflow  hidden  important      Also is not an instant solution but starring commenting on the issue might make them fix it  as they believe it is fixed  http   code google com p gmaps-api-issues issues detail id 5713

User · Answer

Add a div inside your infowindow   lt div id   mydiv   gt YourContent lt  div gt    Then set the size using css  works for me  This asumes all infowindows are the same size    mydiv  width 500px  height 100px

User · Answer

add to css   gm-style-iw      overflow  hidden  important      info window text    lt div style  width  200px  height 150px   gt    here text of the info window  lt  div gt

User · Answer

I think that this behavior is because of some css styling in an outer container  I had the same problem but I solved it using an inner div an adding some padding to it  I know it s weird but it solved the problem   lt div id  fix height  gt       lt h2 gt Title lt  h2 gt       lt p gt Something lt  p gt   lt  div gt    And in my style css  div fix height      padding  5px

User · Answer

Also important is height of the map container  If to small infoWindow always will be on 80px height  Otherwise maxWidth and  innerDiv fix works like a charm

User · Answer

Funny enough  while the following code will correct the WIDTH scroll bar    gm-style-iw       overflow  hidden  important      line-height  1 35       It took this to correct the HEIGHT scroll bar        gm-style-iw div               overflow  hidden  important          EDIT  Adding white-space  nowrap  to either style might correct the spacing issue that seems to linger when the scroll bars are removed  Great point Nathan

User · Answer

I was having the same problem with IE and tried many of the fixes detailed in these responses  but was unable to remove the vertical scrollbars in IE reliably     What worked best for me was to switch to fixed font sizes inside the infowindow --  px     I was using ems   By fixing the font size I no longer needed to explicitly declare the infowindow width or height and the scrollbars were gone for good

User · Answer

My answer is to add a listener  using addListenerOnce  to check if the infoWindow has been added to the DOM  then opening the infoWindow again  no need to close it       map  marker and infoWindow code  we ll call them     myMap  myMarker and myInfoWindow  myInfoWindow open myMap  myMarker   google maps event addListenerOnce myInfoWindow   domready   function                    myInfoWindow open myMap  myMarker

User · Answer

Adding the following to my CSS did the trick for me   white-space  nowrap

User · Answer

I couldnt get it to work in any way shape or form  I was including 3 divs into the box  I wrapped them in an outer div  with widths and heights all set correctly  and nothing worked   In the end I fixed it by setting the div as absolute top left  and then before the div  I set two images  one 300px wide and 1px high  one 120px high and 1px wide  of a transparent gif   It scaled properly then   Its ugly but it works   You could also do one image and set a zindex I expect  or even just one image if your window has no interaction  but this was containing a form  so  that wasn t an option

User · Answer

infowindow setContent response       var infowindowopts          maxWidth  274       content  response    infowindow setOptions infowindowopts

User · Answer

I know this is an old thread  but I just encountered the same problem   I had  lt h2 gt  and  lt p gt  elements in the InfoWindow  and these both had bottom margins   I removed the margins  and InfoWindow sized correctly   None of the other suggested fixes worked   I suspect that the InfoWindow size calculation doesn t take the margins into account

User · Answer

As of mid-2014 there appears to be an InfoWindow sizing bug in Google Maps v3 that affects multiple browsers   It has been reported here  https   code google com p gmaps-api-issues issues detail id 5713  and a demo JSFiddle here  Please click the star on the issue above to vote for it to be fixed   From all my testing  it appears to be related to element size rounding errors  as it only occurs at some font-sizes   Bad workarounds   Having toyed with most suggestions on this page  the following are NOT good solutions    overflow  hidden  can potentially cut off content  white-space  nowrap  can potentially cut off content  Passing a jQuery object or DOM nodes  content potentially overflows outside the InfoWindow  Setting the InfoWindow content after it is opened  on its own  does not help  Changing font away from Roboto  the issue can occur with any font    One possible workaround is giving your InfoWindow a fixed width  such as those who ve suggested setting max-width and min-width   however when you have lots of markers and the amount of content varies fluctuates  this is not ideal   It s also bad for mobile responsive designs   A reasonable workaround   So until Google fix this  I ve had to build a workaround  After about 12  hours of testing and debugging I came up with the following   This does not have the same drawbacks as other suggestions    Content should never be clipped  unless you have large images that exceed the width of the InfoWindow     Vertical scrollbars are added  but only when necessary  No content should overflow outside of the InfoWindow In most cases the InfoWindow is sized automatically to fit the content  not a fixed size  Should be suitable for mobiles and responsive layouts Margins  padding  fonts should all work OK   Downsides    My version requires jQuery  but it could probably be reworked to be pure JS It creates 20px of padding on the right of the content to make room for the scrollbar in case it is needed   You could skip this if you prefer  or do some more checking to only add padding when necessary  It s rather hacky  but without editing Google s javascript  it s possibly the only way    View Code on Github  Please submit improvements and corrections as you find them

[javascript] Google Maps API v3: InfoWindow not sizing correctly

Examples related to javascript

Examples related to html

Examples related to css

Examples related to google-maps