Hi Robin, Thank you very much for your reply. You've solved my problem. I'd shelved this issue and failed to notice your reply. The moment I put your suggested changes into infobubble.js the pop-ups displayed correctly. I narrowed it down to a single line that makes the difference for me:
sizer.style['left'] = '50px'; If I add that to the sizer then the whitespace problem goes away, by making the sizer div visible as per your suggestion I can see that without the sizer.style['left'] the sizer is positioned just out of sight to the right of my map in the webpage and is very narrow, hence the increased height. My CSS is poor but I suspect that's because the sizer div is position:absolute and the map is inside a container div which is position:relative. Anyway thanks to you I can just leave the style['left']='50px' which positions the sizer div on top of the left hand side of my webpage with normal width and height. So thank you very much Robin, and I'm sorry it's taken me so long to notice your post. All the best, Cheers, Mark On Thursday, August 11, 2011 12:15:17 PM UTC+1, Robin Marshall wrote: > > Hi Mark, > > Thanks to your question I figured out the answer for myself. Reading > the code I discovered that it appends the content to the body in a div > which is set to visibility hidden, then works out the height based on > that, then removes the div. If you have specific styles targeting the > content within another element in the body, it will end up with a > height based on a different set of styles from what you think it would > use. > > To debug this, I changed infobubble.js locally to remove the > visibility hidden from the div, add a z-index, left and top value to > position it nicely on my page and add a red border. You can do this on > line 1552 of the uncompiled source file, e.g. > > sizer.style['display'] = 'inline'; > sizer.style['position'] = 'absolute'; > //sizer.style['visibility'] = 'hidden'; > sizer.style['top'] = '300px'; > sizer.style['left'] = '50px'; > sizer.style['z-index'] = '5000'; > > then comment out: > > // document.body.removeChild(sizer); > // delete sizer; > > The end result looked like this: > > http://dl.dropbox.com/u/24585497/map-example.png > > Then I adjusted the stylesheet to make them both look the same and > that solved the problem > > Not an easy fix, and a month after you needed it, but this should > solve your problem. > > Cheers, > Robin > > http://mdigital.co.nz / @robinm > > On Jul 14, 3:44 am, Marky1124 <marky1...@gmail.com> wrote: > > Hi, > > > > I have started migrating a Google Maps API v2 application to v3. I > > used the tabbed infowindows in v2 and so choose to use theinfobubble.js > utility library to get the same functionality in v3. I > > have struggled with the amount of whitespace that appears beneath my > > content in the infobubbles. It seems that the code that automatically > > calculates the height of theinfobubbleis sensitive to various style > > settings in the page. > > > > Here are a couple of example pages: > > > > > http://www.holleydesigns.com/pudo/startermap_apiv3_example1.htmlhttp://www.holleydesigns.com/pudo/startermap_apiv3_example2.html > > > > > In example1 the middleinfobubblecontains a very large amount of > > whitespace in it. The leftinfobubblehas almost none. The contents > > are the same except for spaces between the letters. It is those spaces > > that trigger the whitespace to appear in theinfobubble. The right > > marker has an infowindow purely for comparison. The infowindow seems > > to have a minimum height of three lines, but otherwise does not appear > > to be sensitive to the style settings. > > > > I have spent a good amount of time experimenting with what impacts the > > height calculation of the middleinfobubble. For instance if I remove > > the #mycontainer style then it sizes correctly also the following > > changes to the 'mycontainer' style will fix the height calculation: > > e.g. 1) Remove the 'float:left' or 2) change to 'height:0%' or 3) > > change to 'width:95%' (or less) or 4) change to 'height:800px; width: > > 800px'. > > > > In example2 the middleinfobubbleis sized correctly. The only > > difference between example1 and example2 is the addition of the text > > 'Hi' in the <body> after the <div>'s. > > > > Obviously in this tiny test page any of those changes produces a > > simple fix, however in the context of my full application I'm not sure > > it'll be so easy and without consequences. > > > > So the point of my post is to ask whether your opinion is that > theinfobubblecode could, and perhaps should, be improved to make it pick > > the right height value, or perhaps to point out why I have > > misunderstood the situation and brought this problem upon myself. > > > > Thanks very much for your attention, > > Cheers, > > Mark -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/a7BZ3Jkn8R0J. To post to this group, send email to google-maps-js-api-v3@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
