Resize info window of google map V3 - php

Question

I am facing huge problem to solve info window size. I want to show a image block and some text information in info window but after place the content info window size increased i have read some threads but no luck with my code. Can any one help me to sort it out.
// Creating an object literal containing the properties
// we want to pass to the map
var options = {
zoom: 5,
center: new google.maps.LatLng(44.913990, 15.205078),
mapTypeId: google.maps.MapTypeId.ROADMAP ,
};
// Creating the map
var map = new google.maps.Map(document.getElementById("map"), options);
// Creating a LatLngBounds object
var bounds = new google.maps.LatLngBounds();
// Creating an array that will contain the coordinates
// for New York, San Francisco, and Seattle
var content = [];
var places = [];content.push('Some html');
places.push(new google.maps.LatLng(44.913990, 15.205078));
// Creating a variable that will hold
// the InfoWindow object
var infowindow;
// Looping through the places array
for (var i = 0; i < places.length; i++)
{
// Adding the markers
var marker = new google.maps.Marker({
position: places[i],
map: map,
icon: "/themes/garland/images/beach_icon_gmap.png"
// title: "Place number " + i
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, "click", function() {
// Check to see if we already have an InfoWindow
if (!infowindow) {
infowindow = new google.maps.InfoWindow({
maxWidth: 20,
maxheight: 20
});
}
// Setting the content of the InfoWindow
infowindow.setContent(content[i]);
// Tying the InfoWindow to the marker
infowindow.open(map, marker);
});
})(i, marker);
// Extending the bounds object with each LatLng
bounds.extend(places[i]);
}
// Adjusting the map to new bounding box
// map.fitBounds(bounds)
Any help would be greatly appreciated. Thanks in advance.

Answer 1

The first thing I notice in your code: maxWidth is a valid property of the InfoWindowOptionsapi-doc object that is passed to the InfoWindow constructor, but maxheight is not. You won't be able to treat the InfoWindow as a strict or rigid container, although maxWidth will constrain the width. An InfoWindow is always sized to contain whatever content it has been provided. From the API Doc:
The InfoWindow will be sized according to the content. To set an
explicit size for the content, set content to be a HTML element with
that size.
That said, you are able to control the size, display, color, etc. of an InfoWindow by defining a CSS class and applying the styling rules to the content of the window. Taking the CSS approach to the content will pretty much give you complete control over the size of the content, because the InfoWindow just functions as a container for the content. If a CSS rule results in content of the correct size, your InfoWindow will be the correct size.