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.

Eggers

You can simply override the css of the infoWindow. Inspect those elements using dev tools of browsers(F12), take your own time and come back. – Coolie

Paste your html from the infobox. – Gaylenegayler

I think the right margin is to clear the "close button". – Kampmann

Added the CSS+html of the infowindow. In the source it says infobox for the CSS but it's a infowindows – Eggers

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

Bombycid

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

Maisiemaison

Thanks for this simple solution! Also add this to remove the infowindow padding: .gm-style .gm-style-iw-c { padding: 0; } – Darn

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

Odiliaodille

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

Geithner

HI @Eggers Did you get any answer on that? I am looking for the same thing. Thanks – Penuchle