|
<!-- 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> |
Thanks for the comment @DACODE. I last used this code over 6 years ago, and the Google Maps API has probably progressed since then (and hopefully some of the annoying bugs are fixed). Your code may be all that's required now, but I'm not sure.
Just make sure you test it on InfoWindows with varying lengths of content (short with no scrollbars, and very long ones that may require scrollbars). And test across browsers also, although you may no longer need to support IE 11 which I did in this original example.
Happy coding!