Google maps infowindow scrolling bug: How to solve for all cases?

Question

It's a known bug that the Google Maps API shows the scrollbar for the first (time) clicked infowindow,

The issue, first time:

Rest of the times:

So I found out that adding maxWidth solved the problem,

For me, it Doesn't; If I set the maxWidth to 200px, the scrollbar dissapears, but its smaller than I need,

If I set 250px (size I need), the scrollbar persists

Any idea what could I try?

jsfiddle: http://jsfiddle.net/e0x20tvs/3/

$sescam_ventana = {
  init: function() {
    this.mapa();
  },
  mapa: function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=$sescam_ventana.mapSetup';
    document.body.appendChild(script);
  },
  mapSetup: function() {
    var styles = [
      /*
			{
				stylers: [
					{ saturation: -100 }
				]
			},{
				featureType: "road",
				elementType: "geometry",
				stylers: [
					{ visibility: "simplified" }
				]
			},{
				featureType: "poi.business",
				elementType: "labels",
				stylers: [
					{ visibility: "simplified" }
				]
			}
		*/
    ];
    var styledMap = new google.maps.StyledMapType(styles, {
      name: "SESCAM"
    }); //
    var mapOptions = {
      zoom: 16,
      scrollwheel: false,
      center: new google.maps.LatLng(39.6177074, 4.9725879),
      mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
      }
    }
    var handleMarkerClick = function(marker, index) {
      var $navigationMenu = jQuery('<div>');
      jQuery('.menu-item').each(function(i) {
        var $button = jQuery('<button>');
        $button.text(jQuery(this).text());
        $button.addClass(jQuery(this).data('class'));
        $navigationMenu.append($button);
      });
      if (typeof infowindow === 'undefined') {
        infowindow = new google.maps.InfoWindow({
          height: 380
        });
      }
      var centro = infoCentros[index] //helpful data
      infowindow.setContent(
        '<div class="sescam-info-window">' +
        '<h3>' + centro.nombre + '</h3>' +
        '<p>' + centro.lugar + '</h3>' +
        '<p class="titulo">Coordinador</p>' +
        '<p><strong>' + centro.coordinador.nombre + '</strong></p>' +
        '<p><a href="mailto:' + centro.coordinador.email + '">' + centro.coordinador.email + '</a></p>' +
        '<p class="titulo">Responsable</p>' +
        '<p><strong>' + centro.responsable.nombre + '</strong></p>' +
        '<p><a href="mailto:' + centro.responsable.email + '">' + centro.responsable.email + '</a></p>' +
        '<div class="menu">' + $navigationMenu.html() + '</div>' + '</div>'

      );
      infowindow.open(marker.getMap(), marker);
    }
    var handleMenu = function() {
      jQuery('body').on('click', '.menu button', function() {
        var itemClass = jQuery(this).attr('class');
        jQuery('.listado.' + itemClass).stop(true, true).slideDown().siblings('.listado').stop(true, true).slideUp();
      });
    }
    this.gmap = new google.maps.Map(document.getElementById('mapa'), mapOptions);
    this.gmap.mapTypes.set('map_style', styledMap);
    this.gmap.setMapTypeId('map_style');
    this.mapMarkers = [];
    this.mapInfoWindow = new google.maps.InfoWindow({
      height: 380
    });
    jQuery(window).resize(function() {
      $sescam_ventana.gmap.fitBounds($sescam_ventana.mapBounds);
    });
    for (var i = 0; i < this.mapMarkers.length; i++) {
      // primero eliminamos todos los markers que pudiera haber de una visualización anterior
      this.mapMarkers[i].setMap(null);
    }
    this.mapMarkers.length = 0; // reseteamos el array
    this.mapBounds = new google.maps.LatLngBounds();
    var c = 0; // de inicio no sabemos cuantos elementos tienen realmente latitud y longitud, este contador nos lo chivará
    var latlon; // lo guardamos fuera del each para poder verlo después, si resulta que es el único elemeto a mostrar
    for (var i = 0; i < infoCentros.length; i++) {
      var centro = infoCentros[i];
      var lat = centro.cordenadas.lat;
      var lon = centro.cordenadas.long;
      if (lat && lon) {
        c++;
        latlon = new google.maps.LatLng(lat, lon);
        var moptions = {
          position: latlon,
          map: $sescam_ventana.gmap
        }
        moptions.icon = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/256/Map-Marker-Marker-Outside-Pink-icon.png';
        var marker = new google.maps.Marker(moptions);
        $sescam_ventana.mapMarkers.push(marker);
        //google.maps.event.addListener(marker, 'click', handleMarkerClick);
        google.maps.event.addListener(marker, 'click', handleMarkerClick.bind(undefined, marker, i));

        $sescam_ventana.mapBounds.extend(latlon);
      }
    }
    if (c > 1) {
      $sescam_ventana.gmap.fitBounds(this.mapBounds);
    } else {
      // si solo hay uno el fitbounds no hace un zoom ni un centrado correctos
      $sescam_ventana.gmap.setCenter(latlon);
    }
    handleMenu();
  }
}
jQuery(function() {
  $sescam_ventana.init();
});

.gmapa {
  position: relative;
  padding-bottom: 50%;
}
#mapa {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gmapa">
  <script>
    var infoCentros = [{
      "nombre": "El nombre 0",
      "texto": "Lorem ipsum sit met hamet amid0",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.8019412125
      }
    }, {
      "nombre": "El nombre 1",
      "texto": "Lorem ipsum sit met hamet amid1",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.7019412125
      }
    }, {
      "nombre": "El nombre 2",
      "texto": "Lorem ipsum sit met hamet amid2",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.6019412125
      }
    }, {
      "nombre": "El nombre 3",
      "texto": "Lorem ipsum sit met hamet amid3",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.5019412125
      }
    }, {
      "nombre": "El nombre 4",
      "texto": "Lorem ipsum sit met hamet amid4",
      "lugar": "Toledo",
      "coordinador": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "responsable": {
        "nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
        "email": "[email protected]"
      },
      "cordenadas": {
        "lat": 39.150544196,
        "long": -4.4019412125
      }
    }];
  </script>
  <div id="mapa"></div>
</div>

Answer 1

EDIT

In your specific case, it has to do with the Roboto web font. It is included in the Google Maps API, but nothing is using it at the time on your page before an InfoWindow is opened so the browser has no reason to download it, and doesn't.

When you open the infoWindow, however, the browser at the point realizes it needs the font, and starts to download it, but google maps has measured the infoWindow size before the font is downloaded (see the original answer on how google maps api measures on infoWindow's size). When the font has finished downloading, the content in the infoWindow gets re-painted in the Roboto font which in fact makes the infoWindow a different (larger) size than the size that Google measured it to be before the font was downloaded and it's at this point you'll see scrollbars.

This also explains why you see scrollbars the first time - when google maps measured the infoWindow before the font was downloaded - but you won't see them after - because the font is already downloaded, whatever measurements google maps takes now will be the correct ones.

So, the solution is to

a) Render something in the Roboto font on your page (causing the browser to download that font) before the first infoWindow is open OR

b) Use a different font (one that is used elsewhere on your page, and thus is downloaded on page load) for your infoWindow content.

I'll leave the rest of my answer up because it's a common misunderstanding of how infoWindows work, and, as you pointed out with your google search, a lot of people got hung up on it.

TLDR:

Never use a parent selector (e.g. like #map-canvas) to style the HTML content of your infoWindow.

It's not a bug. Here's how google maps info window styles work:

When you tell google maps API that you want to open an infoWindow with HTML content, google dynamically creates a div element, appends it to your body tag, grabs the measurements of the dynamically created div, and then appends a div with those measurements to the map which is your infoWindow.

Here's where the trick comes into play.

Let's say this is your HTML:

<div id="map-canvas">
</div>

and this is your infoWindow content:

<h1>I'm an infoWindow</h1>
<p>Hi there!</p>

and here is your CSS:

h1 { font-size: 18px; }
#map-canvas h1 { font-size: 24px; }

Google will almost always draw this infoWindow incorrectly - because when it dynamically creates infoWindow div and appends it to the body to get the measurements, the div will have an h1 font-size of 18px. So now google has the measurements and places this div on the map, at which point the h1 font-size increases to 24px so now google is using the wrong measurements and your infoWindow will end up having scrollbars.

I've always found the easiest way to work with infoWindow CSS is to use a wrapper div and always target it, so you're infoWindow HTML content would look like:

<div class="info-window-content">
    <h1>I'm an infoWindow</h1>
    <p>Hi there!</p>
</div>

And then your CSS could look like:

/* global styles */
h1 { font-size: 18px; }
p { line-height: 1.6; }

/* info window styles */
.info-window-content h1 { font-size: 24px; }
.info-window-content p { line-height: 1.2; }

and you wouldn't end up with scrollbars in your infoWindow.