Posted by CANbike on Fri, 1 Nov 2013

Firefox: InfoWindow Scrollbar Fix (Google Maps API v3)

Following the instructions Google Maps JavaScript API v3, unwanted scrollbars would appear in the InfoWindow on Firefox (24.0). The problem was reproducible both on a Linux system and a Mac system. Google Chrome and Apple Safari did not exhibit this anomaly.

Specifically, a custom Google Map was displayed with markers. Clicking the markers would display InfoWindows with variable size text.

In Firefox, scrollbars would appear, even though they were not required. Setting a fixed dimension was not an option as the InfoWindow needs to dynamically scale in size to the content.

Web searches confirmed the Firefox problem, and provided many but no definitive solution. After experimenting around, the following was found to work best.

Remove Unwanted InfoWindow Scrollbar

  • Wrap the in InfoWindow content in DIV tags
  • CSS style the DIV tags with:
    line-height:1.35;
    overflow:hidden;
    white-space:nowrap;

Both overflow:hidden and white-space:nowrap ensure no scrollbars are displayed. However, long text may spill outside of the InfoWindow.

Declaring line-height:1.35 explicitly sets the line height at 1.35 times the font size. The default line-height:normal will not work and is the culprit to overflowing text. With a numerically declared line-height, an appropriate InfoWindow size is calculated by Firefox.

InfoWindow Example

Following the API v3 documentation, a Map, InfoWindow, Marker, and Listener are declared.

var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var infowindow = new google.maps.InfoWindow({content: 'ADD CONTENT'});
var marker = new google.maps.Marker({position: new google.maps.LatLng(43,-80),map: map,title:"MY TITLE"});
google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});

Next step is to wrap the content in DIV tags and CSS style it.

Example 1: In-line CSS Styling

var infowindow = new google.maps.InfoWindow({content: '<div style="line-height:1.35;overflow:hidden;white-space:nowrap;">ADD CONTENT</div>'});

Example 2: External CSS Styling

var infowindow = new google.maps.InfoWindow({content: '<div class="noscrollbar">ADD CONTENT</div>'});

where the external CSS file contains

.noscrollbar {
line-height:1.35;
overflow:hidden;
white-space:nowrap;
}

Example 3: External CSS Style #map-canvas DIV

var infowindow = new google.maps.InfoWindow({content: '<div">ADD CONTENT</div>'});

where the external CSS file contains

#map-canvas div{
line-height:1.35;
overflow:hidden;
white-space:nowrap;
}

Results

Before the Fix: Scrollbars May Appear

Firefox: Google Map InfoWindow Scrollbar

After the Fix: No Scrolling

Firefox: Google Map InfoWindow Scrollbar Fix