|
<!-- 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> |
Hey! Have you tested with CSS? I only needed this: