Small Google Maps Infowindow - Smaller than 200px

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

There is an article here that describes how to resize the info window.

Or 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.