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:

<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
  <div class="" style="overflow: auto;">
    <div class="infoBox">
      <div style="max-width: 352px; padding: 0px;">
        <div id="info-map-element"> 
          <div class="street"> 
            <img src="http://maps.googleapis.com/maps/api/streetview?size=360x190&amp;location=37.7831059,-122.4446528&amp;fov=90&amp;heading=235&amp;pitch=10&amp;sensor=false" alt=""> 
            <div class="shadow"></div>
            <div class="title"> Customer History<br> 123 Foo Av, San Francisco, CA 12345</div>       
          </div>
          <div class="wrap clearfix"> 
            <div class="item  clearfix">
              <small>2013-09-11</small>
              <p>This is the a test of customer history purchases.</p>
                <div class="row clearfix">
                  <div class="col-lg-5"> Cost Estimate <span>$11000</span></div>
                <div class="col-lg-7"> Purchase No. <span>123456789</span></div>
            </div> 
            <div class="row clearfix">
              <div class="col-lg-12"> Sell by <a href="">My Online seller dot com</a></div>
            </div>
          </div>
          <div class="row clearfix"></div>
        </div>
      </div>
    </div>
  </div>
</div>


#map_newsfeed .gm-style-iw {
    width: 352px!important;
    height: auto!important;
    left: 0!important;
    font-size: 15px!important;
    font-weight: normal!important;
    top: 0!important;
    overflow: hidden!important;
    border-radius: 3px;
}
#map_newsfeed .gm-style-iw > div {
    overflow: hidden!important;
}.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
    font-size: 13px;
    font-weight: normal;
}#info-map-element .row > div {
    font-size: inherit;
    font-weight: inherit;
}
#info-map-element .shadow {
    width: 100%;
    height: 100%;
    bottom: 0;
    -webkit-box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
    box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
    position: absolute;
    font-style: normal;
    font-weight: normal;
    z-index: 1;
}
#map .gm-style {
    font-family: inherit;
}#info-map-element .pagination {
    margin: 10px 0 0;
}
.infoBox > img {
    position: absolute;
    top: 0px;
    right: 25px;
    display: block;
    z-index: 3;
}
#info-map-element .pointer {
    width:23px;
    height:19px;
    top: 99%;
    left: 41%;
    position:absolute;
    display:block;
    background: transparent url('http://d3flf7kkefqaeh.cloudfront.net/_assets/3/pointer_down.png'); 
}#info-map-element .wrap {
    padding: 0;
}
#info-map-element .wrap .item:nth-child(even) {
    background: #ececec;
}
#info-map-element .wrap .item {
    padding: 10px;
}#legend strong {
    float: left;
    margin: 0 10px 0 0;
    display: block;
}

EDTI #2: So I can change the dom the way I want it with Jquery. Those 3 lines work"

$(".gm-style-iw").next("div").css("right", '52px');
$(".gm-style-iw").prev("div").children().last().css("width", '351px');
$($(".gm-style-iw").prev("div").children()[1]).css("width", '351px');

But for some reason only the first line get executed.

Answer 1

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

Answer 2

The padding is caused by the scroll applied to the .gm-style-iw-d div, this would remove it but be careful and make sure all your content fits inside the max width and height of the info window cause otherwise it will be hidden.

.gm-style-iw-d {
    overflow: hidden !important;
}

Answer 3

For those who are still looking for solution. Angular 8, helped the code below to remove the paddings and hide the close button for agm-info-window. Basically, overflow: scroll in .gm-style-iw-d element creates that space.

/* hide close button in info-window */
::ng-deep button.gm-ui-hover-effect {
  visibility: hidden;
}

/* clear the paddings  */
::ng-deep .gm-style .gm-style-iw-c {
  padding: 0;
}

/* remove the white space */
::ng-deep .gm-style-iw .gm-style-iw-d {
  overflow: auto !important;
}

Answer 4

You should stop to try fix height/width and set it auto.
Try to change this line:

<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">

To this:

<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: auto; height: auto;">

In the Css change:

#map_newsfeed .gm-style-iw {
  width: 352px!important;
  height: auto!important;
  left: 0!important;
  font-size: 15px!important;
  font-weight: normal!important;
  top: 0!important;
  overflow: hidden!important;
  border-radius: 3px;
}

To:

#map_newsfeed .gm-style-iw {
  width: auto!important;
  height: auto!important;
  left: 0!important;
  font-size: 15px!important;
  font-weight: normal!important;
  top: 0!important;
  overflow: hidden!important;
  border-radius: 3px;
}

It should solve your problem, if not, please show the full code (html/css).