CODEWITHSUNDEEP
google-mapspopupheight
Somnath Pawar
Somnath Pawar

Reputation: 161

How to remove scrollbars from Google map bubble in Google map Javascript V3

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.

Upvotes: 11

Views: 15777

Answers (7)

Grin
Grin

Reputation: 6662

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;
}

Upvotes: 14

Benjamin Robinson
Benjamin Robinson

Reputation: 368

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.

Upvotes: 0

Andrew Chilcott
Andrew Chilcott

Reputation: 23

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

Upvotes: 0

Vlad Nikitin
Vlad Nikitin

Reputation: 1951

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);

Upvotes: 1

Gordon Rouse
Gordon Rouse

Reputation: 301

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 ); 
} );

Upvotes: 1

clintonjammer
clintonjammer

Reputation: 41

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+"\"/>"

Upvotes: 4

user753676
user753676

Reputation:

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

look at maxwidth

Upvotes: 1

Related Questions