1

I have a Google Maps with infoBoxes. The infoBoxes have a functionality which changes the size of the infoBox after it is shown.

This causes the infoBox to flow out of the map however, when the content is bigger than what is initially shown. Is there a way to call the infoBox panBox functionality, so that the infoBox will refit itself in the map again, like it does on open?

In short: How do I make the infoBox fit once more after the size is changed?

See the example: Fiddle

Click the infobox to see the issue

My code example, as I'm not allowed to show a fiddle without some code :)

function initialize() {
var loc, map, marker, infobox;

loc = new google.maps.LatLng(-33.890542, 151.274856);

map = new google.maps.Map(document.getElementById("map-canvas"), {
     zoom: 12,
     center: loc,
     mapTypeId: google.maps.MapTypeId.ROADMAP
});

marker = new google.maps.Marker({
    map: map,
    position: loc,
    visible: true
});

var infobox = new InfoBox({
     content: document.getElementById("infobox"),
     alignBottom: true,
     pixelOffset: new google.maps.Size(0, 0)
});

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

}
google.maps.event.addDomListener(window, 'load', initialize);

jQuery('document').ready(function(){
jQuery('.content').on('click', function(){
    jQuery('.content').hide();
    jQuery('.hidden').show();
    jQuery('#infobox').height(jQuery('.hidden').height());
});
});
Sander Koedood
  • 6,007
  • 6
  • 25
  • 34

2 Answers2

0

You can try add this map.panTo(loc);

google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
});
Verma
  • 8,199
  • 2
  • 15
  • 17
0

you can use infobox.panBox_();

if you want to know how it works, open infobox.js from the plugin.

Achmad Gunawan
  • 1