Problems with whitespace in infobubble in API v3
520 views
Skip to first unread message
Marky1124
Jul 13, 2011, 11:44:59 AM7/13/11
to Google Maps JavaScript API v3
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 the
infobubble.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 the infobubble is sensitive to various style
settings in the page.
Here are a couple of example pages:
http://www.holleydesigns.com/pudo/startermap_apiv3_example1.html
http://www.holleydesigns.com/pudo/startermap_apiv3_example2.html
In example1 the middle infobubble contains a very large amount of
whitespace in it. The left infobubble has almost none. The contents
are the same except for spaces between the letters. It is those spaces
that trigger the whitespace to appear in the infobubble. 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 middle infobubble. 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 middle infobubble is 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 the
infobubble code 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
I have started migrating a Google Maps API v2 application to v3. I
used the tabbed infowindows in v2 and so choose to use the
infobubble.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 the infobubble is sensitive to various style
settings in the page.
Here are a couple of example pages:
http://www.holleydesigns.com/pudo/startermap_apiv3_example1.html
http://www.holleydesigns.com/pudo/startermap_apiv3_example2.html
In example1 the middle infobubble contains a very large amount of
whitespace in it. The left infobubble has almost none. The contents
are the same except for spaces between the letters. It is those spaces
that trigger the whitespace to appear in the infobubble. 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 middle infobubble. 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 middle infobubble is 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 the
infobubble code 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
Robin Marshall
Aug 11, 2011, 7:15:17 AM8/11/11
to Google Maps JavaScript API v3
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
> whitespace in it. The leftinfobubblehas almost none. The contents
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
> 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
> content in the infobubbles. It seems that the code that automatically
> 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
>
> Here are a couple of example pages:
>
> http://www.holleydesigns.com/pudo/startermap_apiv3_example1.htmlhttp://www.holleydesigns.com/pudo/startermap_apiv3_example2.html
>
> 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
> 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
> 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
> 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'.
>
> 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
> '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.
>
Marky1124
Jun 21, 2012, 9:18:13 AM6/21/12
to google-map...@googlegroups.com
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
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
Reply all
Reply to author
Forward
0 new messages