11

I have used Google map javascript V3 API to display a map. But I have a problem with the map bubbles. When the information in the bubble is more than the specific height, it is inserting scrollbars into the bubble.

How can I remove those scrollbars and assign dynamic width & height to the bubble as per their content?

Or how can I design my own custom bubble to make it dynamic for width & height as per the contents?

Thanks in advance.

asgeo1
  • 9,028
  • 6
  • 63
  • 85
Somnath Pawar
  • 161
  • 1
  • 1
  • 10

7 Answers7

14

Had a similar problem - scroll bars appear in popups with text content, sometimes they disappear after closing & opening a popup again, they also appear if I was changing a page zoom level.

This post was helpfull. I added a few CSS strings and it solved all my extra scrollbars cases:

.gm-style-iw {
   overflow: hidden !important; 
   line-height: 1.35;
   white-space: nowrap;
}
Davorama
  • 76
  • 5
Grin
  • 6,082
  • 2
  • 22
  • 15
4

If you have an image in your infowindows like I do, try a little inline styling where you are setting the content for the infowindows. I found adding display:block to the img tag fixed the problem for me.

Tested on FF, IE9, Opera, Safari, Chrome.

Example:

    var html = "<img style=\"display:block;\" src=\""+image+"\"/>"
clintonjammer
  • 41
  • 3
  • Setting image's width also works but this is not a solution for text or other inline contents. – HasanG Jun 11 '14 at 22:41
1

Thanks to chromes element inspector, I can see that the infowindow content you provide is always wrapped in <div style="overflow: auto">..</div>. Setting maxWidth does not seem to stop the horizontal scrollbar if you have scrolling height. I decided I needed to hack the parent element and turn off the horizontal scrolling, ie overflow-x: hidden.

Put an id identifier in the html you provide, and find that element (using jQuery here) after the infoWindow is loaded (need to use addListener). Jump from the element to the parent and set its overflow-x property to hidden, and then horizontal scrollbar is removed.

This is of course a hack - and may stop working if googles infoWindow HTML code changes - hopefully by then there will be a better solution also. 

//assume you have a marker already called marker

google.maps.event.addListener(marker, 'click', function(){  

    var _info = new google.maps.InfoWindow({content: '<div id="infoWindow">content that is vertically large...</div>' });

    google.maps.event.addListener(_info, 'domready', function(){
        $(document).find('#infoWindow').parent().css('overflow-x', 'hidden' );

    });

    _info.open( map, marker ); 
} );
Gordon Rouse
  • 301
  • 3
  • 6
1

i have found that firefox recalculates height of the element. for example:

  1. firs time element is added to the dom it calculates something like default height, let it be 100px.
  2. then gmaps fetches this height and puts it to the infowindow wrapper, height = 100px.
  3. then firefox fetches applies styles for this element (font size for example) and puts the height property based on this calculated styles, for example height = 130px, but infowindow wrapper height = 100px was already set by gmap script.

the solution i have found is a bit ugly but it works, we should make gmaps script to recalculate height of infowindow wrapper after firefox has recalculated the elements height.

infowindow.setContent(data);
infowindow.open(map, marker);
infowindow.close();
setTimeout(function (){
    infowindow.open(map, marker);
}, 1);
Vlad Nikitin
  • 1,929
  • 15
  • 17
1

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

look at maxwidth

  • Daniel thanks for your helping reply, I have checked the maxwidth option. It is good to wrap out the contents & remove horizontal scrolls. But how can I remove the vertical scroll bar? Is there any property exists which allows dynamic height allocation to Bubble? – Somnath Pawar May 16 '11 at 12:34
  • http://stackoverflow.com/questions/1554893/google-maps-api-v3-infowindow-not-sizing-correctly hm could help, you should give the info window a specific height –  May 16 '11 at 12:40
0

I had the same problem but managed to solve it merely by adjusting the font-size and line-height in the in my wrapper.

Andrew Chilcott
  • 23
  • 4
0

I think I may have found the solution to this. In my case, the way I was setting font size was causing the problem. I think the API relies on a pixel font size to set the initial width/height (because the JavaScript fires too late to calculate around relative widths? Not positive about that.)

Anyway, you need to specify font sizes within your infowindow in pixels (not a relative unit.) Like:

.infowindow p {
  font-size: 15px;
}

Once I had set the units to pixels, I also had to specify (to get rid of the default width setting):

.gm-style-iw {
  width: auto !important;   
}

Google doesn't note the formatting needs very carefully in the API docs, so it was a pretty "trial and error" process to get this working. I still don't feel like this solution is 100% reliable.

Benjamin Robinson
  • 378
  • 2
  • 7