Question

I’m using the Google maps API (v2) to display a country overlay over a world map. The data comes from a KML file, which contains coords for the polygons along with a HTML description for each country. This description is displayed in the ‘info window’ speech bubble when that country is clicked on.

I had some trouble initially as the info windows were not expanding to the size of the HTML content they contained, so the longer ones would spill over the edges (this seems to be a common problem). I was able to work around this by resetting the info window to a specific height as follows:

GEvent.addListener(map, "infowindowopen", function(iw) { iw = map.getInfoWindow(); iw.reset(iw.getPoint(), iw.getTabs(), new GSize(300, 295), null, null); });

Not ideal, but it works. However now, when the info windows are opened the top part of them is sometimes obscured by the edges of the map, as the map does not pan to a position where all of the content can be viewed.

So my questions:

1. Is there any way to get the info windows to automatically use a height appropriate to their content, to avoid having to fix to a set pixel height?

2. If fixing the height is the only option, is there any way to get the map to pan to a more appropriate position when the info windows open? I know that the map class has a panTo() method, but I can’t see a way to calculate what the correct coords would be.

Here’s my full init code:

google.load("maps", "2.x");

// Call this function when the page has been loaded
function initialize() {
  var map = new google.maps.Map2(document.getElementById("map"), {backgroundColor:'#99b3cc'});

  map.addControl(new GSmallZoomControl());

  map.setCenter(new google.maps.LatLng(29.01377076013671, -2.7866649627685547), 2);

  gae_countries = new GGeoXml("http://example.com/countries.kmz");
  map.addOverlay(gae_countries);

  GEvent.addListener(map, "infowindowopen", function(iw) { iw = map.getInfoWindow(); iw.reset(iw.getPoint(), iw.getTabs(), new GSize(300, 295), null, null); });
}
google.setOnLoadCallback(initialize);

Answer 1

I eventually solved this by removing my resize listener and adding some text to the start of the balloon that was then hidden using CSS. Some trial and error was required to get the height right. Not an ideal solution but it’ll work until future versions of the API provide a little more control.