Small Google Maps Infowindow - Smaller than 200px - google-maps

Question

I have a map_canvas with a width of 225.
I want my infobox to be smaller than this (eg. 150 px).
Is this possible? I tried maxWidth and adding styles, but nothing seemed to work.
A screen (on imgshack) can be found below:
Also,
I'm using v3 of Google Maps
Javascript:
var results_coods;
var map_2;
var marker_2;
var infowindow_2;
function call_gmap()
{
if($('#map_text').attr('lat')){
var lat = Number($('#map_text').attr('lat').replace(",","."));
var lng = Number($('#map_text').attr('long').replace(",","."));
initialize(lat,lng);
/*
var lat= '51.0153389';
var lng = '2.7253832';
*/
}
}
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 13,
center: latlng,
disableDefaultUI: true,
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
draggable: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: $('#map_text').html(),
maxWidth: 150
});
var image = 'beachflag.png';
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.open(map,marker);
google.maps.event.addListener(
marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
function GcodeAddress()
{
var map;
geocoder = new google.maps.Geocoder();
var address = $('#map_address').html();
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 13,
center: results[0].geometry.location,
navigationControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infowindow = new google.maps.InfoWindow({
content: $('#map_text').html()
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
results_coods = results[0].geometry.location;
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
infowindow.open(map,marker);
google.maps.event.addListener(
marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(map, 'resize');
marker_2 = marker;
map_2 = map;
infowindow_2 = infowindow;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function resizeMap()
{
//hiervan komt 1 error, de andere van infowindow
google.maps.event.trigger(map_2, 'resize');
map_2.setCenter(results_coods);
infowindow_2.open(map_2,marker_2);
}
Javascript, bottom of html page:
$(document).ready(function($) {
GcodeAddress();
resizeMap();
});
HTML (VB.Net):
'-- Google Map
g_map_text.Text = "<div id=""map_canvas"" style=""width: 225px; height: 225px; position: relative;"" /></div>" & vbCrLf
g_map_text.Text &= String.Format("<div id='map_text' style=""display:none;width:150px;"">{0}</div>", LoadKantoor)
g_map_text.Text &= String.Format("<div id='map_address' style='display:none;' >{0}</div>", Bedrijf.Bedrijf("postalcode") & " " & Bedrijf.Bedrijf("city") & "," & Bedrijf.Bedrijf("address"))

Answer 1

An easier approach is to style using CSS. You need wrap the contents of the infoWindow in a div with your custom CSS.
Javascript:
marker.openInfoWindowHtml('<div class="iwContainer">' + yourContent + '</div>');
CSS:
.iwContainer {
width: 300px;
height: 200px;
}
Are you setting the maxWidth for the infowindow before the call to open as described here
EDIT:
I've looked at this again and it looks fine. I don't understand why it doesn't work.
You could use InfoBox.js instead?
API Reference: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
Download JS: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/
Examples: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/
Let me know how you get on.

Answer 2

Maybe you interested using this infobubble:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
you can apply css on this and easy to custom with the example