SimonEast/README.md

## README.md

      
    Raw
  

              README.md
            
          
    For most of 2014, the Google Maps API v3 has had a weird bug in that scrollbars often appear unnecessarily in InfoWindows, and they look freakin' ugly.
Lots of people suggest simply putting overflow: visible or overflow: hidden on the DIV but this completely removes the scrollbars which are useful when content is larger than the window.  This script attempts to keep that functionality as much as possible.
This is the result of many hours of debugging and re-testing.  It's not 100%, but it's super close.  Still a work in progress.
View Example HTML

http://bl.ocks.org/SimonEast/raw/16b5bf3d56c0e5035b31/

(should always reflect the latest version from Github)
How to apply the fix


Wrap your InfoWindow content in <div class="infoWindow">.  For example:

new google.maps.InfoWindow({
  content: '<div class="infoWindow">' + content + '</div>'
}); 

After creating your InfoWindow object but before calling infoWindow.open() ensure you add this callback:

google.maps.event.addListener(infoWindow, 'domready', fixInfoWindowScrollbars);

Include the following JS function on your page:

  /**
   * Fixes a bug (possibly a rounding error?) in Google Maps API v3 whereby scrollbars appear
   * on InfoWindow content.
   * 
   * Yes, this is incredibly hacky and ugly. Argh.
   * 
   * Requires jQuery
   * 
   * Should be called like this...
   * google.maps.event.addListener(infoWindow, 'domready', fixInfoWindowScrollbars);
   * (after creating the infoWindow object, but before calling open())
   */
  function fixInfoWindowScrollbars() {
    
    if (this.hasFixApplied) return;
    
    // Find the DOM node for this infoWindow
    var InfoWindowWrapper = $((this.B || this.D).contentNode.parentElement);
    
    // We disable scrollbars temporarily
    // Then increase .infoWindow's natural dimensions by 2px in width and height    
    
    InfoWindowWrapper.children().css('overflow', 'visible');
    
    var InfoWindowElement = InfoWindowWrapper.find('.infoWindow');
    InfoWindowElement            
        .width(function(i, oldWidth) { return oldWidth + 3 })
    
    // Will this content need scrollbars?  If so, add another 20px padding on right
    if (InfoWindowElement.height() > InfoWindowWrapper.height()) {
        InfoWindowElement
            .css({'padding-right': '20px'})
            .width(function(i, oldWidth) { return oldWidth - 20 })
    }
        
    InfoWindowElement
        .height(function(i, oldHeight) { return oldHeight + 3 })            
  
    // Replace infoWindow content with our new DOM nodes
    this.hasFixApplied = true;
    this.setContent(InfoWindowElement.get(0))
   
  }

Include the following CSS on the page or within your stylesheet:

.gm-style-iw {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.gm-style-iw > div {
  overflow: visible !important;   
}
.infoWindow {
  overflow: hidden !important;
}
Please feel free to submit tweaks or improvements on the Github Gist: https://gist.github.com/SimonEast/16b5bf3d56c0e5035b31
Tested in


Chrome 40 - working super well
Firefox - solves 98% of the issues, although still has some slight issues with height on reeeeeally long content areas
IE 11 - works great


## index.html
<!-- Full HTML example with fixes applied -->
<html>
<head>
    <script src="//maps.googleapis.com/maps/api/js?version=3.exp"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <div id="map" style="width: 100%; height: 700px"></div>

    <script>
        //------- Create Example Map ---------
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: new google.maps.LatLng(-30, 145.5),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        // Create 3 markers
        var markers = [];
        markers[0] = new google.maps.Marker({
            position: new google.maps.LatLng(-37.8181, 145.119),
            map: map
        });

        markers[1] = new google.maps.Marker({
            position: new google.maps.LatLng(-37.8181, 107),
            map: map
        });

        markers[2] = new google.maps.Marker({
            position: new google.maps.LatLng(-30.8181, 120),
            map: map
        });

        var content = [
          '<h2>Aaa bbb ccc dddd</h2>',
          '<h2>Aaa bbb ccc dddd</h2> Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd',
            '<h2>Aaa bbb ccc dddd</h2> Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd',
        ];

        $.each(markers, function(i){

            var marker = this;

            // Create InfoWindows for each marker
            var infoWindow = new google.maps.InfoWindow({
                //------- FIX STEP 1: Wrap info window content inside the following 2 DIVs -------
                // Two are required so that we can prevent collapsing margins
                content: '<div class="infoWindow">' + content[i] + '</div>'
            });

            google.maps.event.addListener(marker, 'click', function(){
                infoWindow.open(map, marker);
            });

            //------- FIX STEP 2: Add this PRIOR to infoWindow.open() -------
            google.maps.event.addListener(infoWindow, 'domready', fixInfoWindowScrollbars);

            infoWindow.open(map, marker);

        });

        /**
         *------- FIX STEP 3: Add this function somewhere on the page -------
         *
         * Fixes a bug (possibly a rounding error?) in Google Maps API v3 whereby scrollbars appear
         * on InfoWindow content.
         *
         * Yes, this is incredibly hacky and ugly. Argh.
         *
         * Requires jQuery
         *
         * Should be called like this...
         * google.maps.event.addListener(infoWindow, 'domready', fixInfoWindowScrollbars);
         * (after creating the infoWindow object, but before calling open())
         */
        function fixInfoWindowScrollbars() {

            if (this.hasFixApplied) return;

            // Find the DOM node for this infoWindow
            var InfoWindowWrapper = $((this.B || this.D).contentNode.parentElement);

            // We disable scrollbars temporarily
            // Then increase .infoWindow's natural dimensions by 2px in width and height

            //InfoWindowWrapper.css('overflow', 'visible !important');
            InfoWindowWrapper.children().css('overflow', 'visible');

            var InfoWindowElement = InfoWindowWrapper.find('.infoWindow');
            InfoWindowElement
                .width(function(i, oldWidth) { return oldWidth + 3 })

            // Will this content need scrollbars?  If so, add another 20px padding on right
            if (InfoWindowElement.height() > InfoWindowWrapper.height()) {
                InfoWindowElement
                    .css({'padding-right': '20px'})
                    .width(function(i, oldWidth) { return oldWidth - 20 })
            }

            InfoWindowElement
                .height(function(i, oldHeight) { return oldHeight + 3 })
                //.parent().css('overflow', 'visible');

            // Replace infoWindow content with our new DOM nodes
            this.hasFixApplied = true;
            this.setContent(InfoWindowElement.get(0))

        }
    </script>
    <style>
        /*------- FIX STEP 4: Include the following CSS within the page -------*/
        .gm-style-iw {
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }
        .gm-style-iw > div {
           overflow: visible !important;
        }
        .infoWindow {
            overflow: hidden !important;
        }
    </style>
</body>
</html>
	<!-- Full HTML example with fixes applied -->
	<html>
	<head>
	<script src="//maps.googleapis.com/maps/api/js?version=3.exp"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>
	<div id="map" style="width: 100%; height: 700px"></div>

	<script>
	//------- Create Example Map ---------
	map = new google.maps.Map(document.getElementById('map'), {
	zoom: 4,
	center: new google.maps.LatLng(-30, 145.5),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	// Create 3 markers
	var markers = [];
	markers[0] = new google.maps.Marker({
	position: new google.maps.LatLng(-37.8181, 145.119),
	map: map
	});

	markers[1] = new google.maps.Marker({
	position: new google.maps.LatLng(-37.8181, 107),
	map: map
	});

	markers[2] = new google.maps.Marker({
	position: new google.maps.LatLng(-30.8181, 120),
	map: map
	});

	var content = [
	'<h2>Aaa bbb ccc dddd</h2>',
	'<h2>Aaa bbb ccc dddd</h2> Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd',
	'<h2>Aaa bbb ccc dddd</h2> Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd Aaa bbb ccc dddd',
	];

	$.each(markers, function(i){

	var marker = this;

	// Create InfoWindows for each marker
	var infoWindow = new google.maps.InfoWindow({
	//------- FIX STEP 1: Wrap info window content inside the following 2 DIVs -------
	// Two are required so that we can prevent collapsing margins
	content: '<div class="infoWindow">' + content[i] + '</div>'
	});

	google.maps.event.addListener(marker, 'click', function(){
	infoWindow.open(map, marker);
	});

	//------- FIX STEP 2: Add this PRIOR to infoWindow.open() -------
	google.maps.event.addListener(infoWindow, 'domready', fixInfoWindowScrollbars);

	infoWindow.open(map, marker);

	});

	/**
	*------- FIX STEP 3: Add this function somewhere on the page -------
	*
	* Fixes a bug (possibly a rounding error?) in Google Maps API v3 whereby scrollbars appear
	* on InfoWindow content.
	*
	* Yes, this is incredibly hacky and ugly. Argh.
	*
	* Requires jQuery
	*
	* Should be called like this...
	* google.maps.event.addListener(infoWindow, 'domready', fixInfoWindowScrollbars);
	* (after creating the infoWindow object, but before calling open())
	*/
	function fixInfoWindowScrollbars() {

	if (this.hasFixApplied) return;

	// Find the DOM node for this infoWindow
	var InfoWindowWrapper = $((this.B \|\| this.D).contentNode.parentElement);

	// We disable scrollbars temporarily
	// Then increase .infoWindow's natural dimensions by 2px in width and height

	//InfoWindowWrapper.css('overflow', 'visible !important');
	InfoWindowWrapper.children().css('overflow', 'visible');

	var InfoWindowElement = InfoWindowWrapper.find('.infoWindow');
	InfoWindowElement
	.width(function(i, oldWidth) { return oldWidth + 3 })

	// Will this content need scrollbars? If so, add another 20px padding on right
	if (InfoWindowElement.height() > InfoWindowWrapper.height()) {
	InfoWindowElement
	.css({'padding-right': '20px'})
	.width(function(i, oldWidth) { return oldWidth - 20 })
	}

	InfoWindowElement
	.height(function(i, oldHeight) { return oldHeight + 3 })
	//.parent().css('overflow', 'visible');

	// Replace infoWindow content with our new DOM nodes
	this.hasFixApplied = true;
	this.setContent(InfoWindowElement.get(0))

	}
	</script>
	<style>
	/------- FIX STEP 4: Include the following CSS within the page -------/
	.gm-style-iw {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	}
	.gm-style-iw > div {
	overflow: visible !important;
	}
	.infoWindow {
	overflow: hidden !important;
	}
	</style>
	</body>
	</html>