google maps v3 change size of infowindow

Question

I would like to set the size of an infowindow to fit the content inside. The standard infowindow is too wide I tried to use maxWidth but it doesn\'t seem to work. What is the be

Answer 1

What you want to do is replace the "standard" Googlemaps infoWindow with your own, and put your content into it. Once you replace the standard GM infoWindow, you have a lot of latitude to work with. What I did is this:

Add a new style ID called #infoWindow, and set its width.

#infoWindow {
    width: 150px;
}

Outside of any functions within my Javascript, I create a new infoWindow:

var infoWindow = new google.maps.InfoWindow();

Create a new var within the function that sets the information displayed by the marker(s), and set its value to the content:

var html = '
';
html += 'NY
total 60
2009: 10
2010: 20
2011: 30';
html +='
';

Call the createMarker function using the location information you would have created elsewhere, and include the html var as one of the arguments:

var marker = createMarker(point,name,html);

The createMarker function you would declare elsewhere, which would bring all of the information together, display the marker on your map, and display the information above when it's clicked on:

function createMarker(latlng,name,html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: name
        });

    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(contentString); 
        infoWindow.open(map,marker);
        });
}