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 best way to resize an infowindow?

see code:

    window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);

the information that will be displayed in the bubble looks like this( \n means next line)

NY \ntotal 60 \n2009: 10 \n2010: 20 \n2011: 30

Answer 1

JFrancis answers is the right one, just don't forget to add "!important" in your CSS when you set the width! This might look like a minor thing, but if you don't do it, your CSS will simply get overwritten!

#infoWindow {
    width: 150px !important;
}

Answer 2

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 = '<div id="infoWindow">';
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30';
html +='</div>';

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);
        });
}

Answer 3

For me this CSS works fine:

.gm-style-iw {
  width: 324px !important;
  height: 120px !important;
}

Answer 4

please take a look at following API references and examples:

Google Map V3 Examples: https://developers.google.com/maps/documentation/javascript/examples/

Google Map V3 API Ref: https://developers.google.com/maps/documentation/javascript/reference#MapOptions

Answer 5

Just so everyone is clear, if they stumble on this thread.

All you need to do is set the height and width of a container in the your info window content.

You don't need to override google classes and you don't need to get overly complicated about this.

var contentString = '<div class="map-info-window">'+
  '<h1>My Info Window</h1>'+
  '<p>Hello World</p>'+
  '</div>';

var infowindow = new google.maps.InfoWindow({
      content: contentString,   });

In my css I have this:

.map-info-window {
    width:200px;
    height:200px;
}

That's it. That's all you need to do to set the width of a Google Maps InfoWindow.

Answer 6

To set the size of the bubble info-window inside a google map it's enough to add the following css in your CSS file:

.gmap-popup {
  max-width:204px;
  max-height:110px;
}

Adapted from this discussion.