Menu
I've been experimenting with the Google Maps API, but I'm having trouble with the InfoWindow... It always seems to be too small to fit the content that I place inside of it, so my content spills outside the InfoWindow and onto the map:
It doesn't seem to make a difference if the content in the InfoWindow is dynamic or static, big or small, the white box around the content is always a little bit too small.
This is the code I'm testing:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuV-Jyz8N6b1fVUVCa1EnbPzgeCs9J5_o&sensor=true"></script>
<script type="text/javascript">
var districts = [
{
name: 'Test Spot 1',
latitude: 29.680894,
longitude: -82.298584
},
{
name: 'Test Spot 2',
latitude: 28.323725,
longitude: -80.713806
}
],
addDistrictMarker = function(district, map, infoWindow) {
var position = new google.maps.LatLng(district.latitude, district.longitude),
marker = new google.maps.Marker({
position: position,
map: map,
title: district.name
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close()
var $infoWindowContent = $(infoWindow.content),
$title = $infoWindowContent.find('#title');
$title.html(marker.title);
$infoWindowContent.show();
infoWindow.open(map, marker);
});
},
addDistrictMarkers = function(map, infoWindow) {
for (var i=0; i<districts.length; i++) {
var district = districts[i];
addDistrictMarker(district, map, infoWindow);
}
},
initialize = function() {
var mapOptions = {
center: new google.maps.LatLng(27.907058,-81.44165),
zoom: 7
},
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions),
$infoWindowContent = $('#info-window'),
infoWindow = new google.maps.InfoWindow({
content: $infoWindowContent.get(0)
});
addDistrictMarkers(map, infoWindow);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="info-window" style="display: none;">
<h1 id="title"></h1>
<div id="bodyContent">
<p>A description of some sort...</p>
<p>
And a link:
<a href="http://foo.bar.com">http://foo.bar.com</a>
</p>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Is there a way I can tell Google's code to resize the InfoWindow if/when Google's code doesn't do it automatically? Or do I just have a dumb mistake in my code that is preventing google from sizing the InfoWindow correctly?
677
I ended up with:
infoWindowLinea.setContent(infoWindowLinea.getContent());
just after changing the content. This forces google maps to recalculate width and height.
51
My previous answer was wrong.
Problem is that you are changing property content of infoWindow without using method getcontent() and setcontent so infowindow.open() doesn't know proper size. See this little changed code which does the same as yours (hardcoded change of title):
addDistrictMarker = function(district, map, infoWindow) {
var position = new google.maps.LatLng(district.latitude, district.longitude),
marker = new google.maps.Marker({
position: position,
map: map,
title: district.name
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close()
var $infoWindowContent = $(infoWindow.content),
$title = $infoWindowContent.find('#title');
var iWC = infoWindow.getContent();
iWC = '<div><h1>My Title</h1><div>Body something to be here><p>A description of some sort...</p><p>And a link:<a href="http://foo.bar.com">http://foo.bar.com</a></p></div></div>'
//$title.html(marker.title);
//$infoWindowContent.show();
infoWindow.setContent(iWC);
infoWindow.open(map, marker);
});
},
Result:
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
