Remove right and bottom margin on infowindows

Question

I'm playing around with the google InfoWindow. And almost everything is perfect. I'm Just missing something on the windows. I always have a right and bottom white space. I don't mind that much for the bottom one but I'd like to get rid of the right one. Any idea how to do that ? EDIT, here is the code: ```

Customer History
123 Foo Av, San Francisco, CA 12345

2013-09-11

This is the a test of customer history…

Accepted Answer

You need to first remove the infowindow background & shadow, then apply your own css.

JS part

```
/*
 * The google.maps.event.addListener() event waits for
 * the creation of the infowindow HTML structure 'domready'
 * and before the opening of the infowindow defined styles
 * are applied.
 */
google.maps.event.addListener(infowindow, 'domready', function() {

// Reference to the DIV which receives the contents of the infowindow using jQuery
   var iwOuter = $('.gm-style-iw');

/* The DIV we want to change is above the .gm-style-iw DIV.
    * So, we use jQuery and create a iwBackground variable,
    * and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
    */
   var iwBackground = iwOuter.prev();

// Remove the background shadow DIV
   iwBackground.children(':nth-child(2)').css({'display' : 'none'});

// Remove the white background DIV
   iwBackground.children(':nth-child(4)').css({'display' : 'none'});

});
```

CSS part (example)

```
.gm-style-iw {
   width: 350px !important;
   top: 0 !important;
   left: 0 !important;
   background-color: #fff;
   box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
   border: 1px solid rgba(72, 181, 233, 0.6);
   border-radius: 2px 2px 0 0;
}
```

Source

Remove right and bottom margin on infowindows

Solution

Problem