Google Map Custom InfoWindow's Tail Won't move and can't remove dropshadow

Question

I have created a custom Google Maps InfoWindow.

I managed to customise it to the way I need and reposition main elements but I can't seem to move the tail or remove the tail's dropshadow.

What am I missing here?

Thanks.

My Code

jQuery(document).ready(function($){
 
 <!-- BASIC MAP SETUP-->
 
 //set your google maps parameters
 var latitude = -26.121153,
  longitude = 28.318868,
  map_zoom = 15;

 <!-- END BASIC MAP SETUP-->
 
 
 <!-- CUSTOM MARKER -->

 //google map custom marker icon - .png fallback for IE11
 var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
 var marker_url = ( is_internetExplorer11 ) ? 'img/cd-icon-location.png' : 'img/cd-icon-location.svg';
 
 <!-- END CUSTOM MARKER -->
 
 <!-- CUSTOM STYLING - COLOURS -->

 //we define here the style of the map
 var style= [ 
  {
        "featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "saturation": 36
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 40
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            },
            {
                "weight": 1.2
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#2D2D2D"
            },
            {
                "lightness": 0
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 21
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 29
            },
            {
                "weight": 0.2
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 18
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 19
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            }
   ]
  }
 ];
 
 <!-- END CUSTOM STYLING - COLOURS -->
 
 <!-- CONTROLS -->
  
 //set google map options
 var map_options = {
       center: new google.maps.LatLng(latitude, longitude),
       zoom: map_zoom,
       panControl: false,
       zoomControl: false,
       mapTypeControl: false,
       streetViewControl: false,
       mapTypeId: google.maps.MapTypeId.ROADMAP, //ROADMAP (normal, default 2D map), SATELLITE (photographic map), HYBRID (photographic map + roads and city names), TERRAIN (map with mountains, rivers, etc.) //
       scrollwheel: false,
       styles: style,
    }
 
 <!-- END CONTROLS -->
 
 <!-- INITIALISE MAP -->
 
 var map = new google.maps.Map(document.getElementById('google-container'), map_options);
 //add a custom marker to the map    
 var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-26.121153, 28.318868),  //position: new google.maps.LatLng(-26.121153, 28.318868),//
     map: map,
     visible: true,
   <!-- icon:'../img/3.png',LINK TO CUSTOM ICON IMAGE -->
  title:'Click to zoom' <!-- CHANGE CURSOR HOVER TITLE BOX -->
    <!--animation:google.maps.Animation.BOUNCE,  REMOVE THIS LINE TO STOP MARKER ANIMATION, LAST LINE TO NEVER HAVE , -->
 });
 
 <!-- END INITIALISE MAP -->
 
 <!-- CUSTOM CONTROLS -->

 //add custom buttons for the zoom-in/zoom-out on the map
 function CustomZoomControl(controlDiv, map) {
  //grap the zoom elements from the DOM and insert them in the map 
    var controlUIzoomIn= document.getElementById('cd-zoom-in'),
     controlUIzoomOut= document.getElementById('cd-zoom-out');
    controlDiv.appendChild(controlUIzoomIn);
    controlDiv.appendChild(controlUIzoomOut);

  // Setup the click event listeners and zoom-in or out according to the clicked element
  google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
      map.setZoom(map.getZoom()+1)
  });
  google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
      map.setZoom(map.getZoom()-1)
  });
 }
 
 <!-- END CUSTOM CONTROLS -->
 
 <!-- ZOOM -->

 var zoomControlDiv = document.createElement('div');
  var zoomControl = new CustomZoomControl(zoomControlDiv, map);

   //insert the zoom div on the top left of the map
   map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
 
 <!-- END ZOOM -->
 
 <!-- INFO WINDOW -->

 var infowindow = new google.maps.InfoWindow({
 content:"TST"
 });
 
 // InfoWindow content
  var content = '<div id="iw-container">' +
                    '<div class="iw-content">' +
         '<div class="iw-title">Contacts</div>' +
                      '<span class="iw-sub-title">-26.121153, 28.318868</span>'+
                    '</div>' +
                  '</div>';

  // A new Info Window is created and set content
  var infowindow = new google.maps.InfoWindow({
    content: content,

    // Assign a maximum value for the width of the infowindow allows
    // greater control over the various content elements
    maxWidth: 350
  });
 

  // This event expects a click on a marker
  // When this event is fired the Info Window is opened.
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

  // Event that closes the Info Window with a click on the map
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // *
  // START INFOWINDOW CUSTOMIZE.
  // The google.maps.event.addListener() event expects
  // 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 that wraps the bottom of infowindow
    var iwOuter = $('.gm-style-iw');

    /* Since this div is in a position prior to .gm-div style-iw.
     * We use jQuery and create a iwBackground variable,
     * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
    */
    var iwBackground = iwOuter.prev();

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

    // Removes white background DIV
    iwBackground.children(':nth-child(4)').css({'display' : 'none'});
 
 // Removes Tail Shadow
    iwBackground.children(':nth-child(1)').css({'display' : 'none'});

    // Moves the infowindow 115px to the right.
    iwOuter.parent().parent().css({left: '115px'});

    // Moves the shadow of the arrow 76px to the left margin.
    iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: -115px !important'});

    // Moves the arrow 76px to the left margin.
    iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left:  !important'});

    // Changes the desired tail shadow color.
    iwBackground.children(':nth-child(3)').find('div').children().css({opacity: '1', 'background-color': 'rgba(60, 60, 60, 0.75)', 'z-index' : '1', 'left': '-55px !important'});

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css({opacity: '1', right: '110px', top: '14px', border: '5px solid #FFF'});
  
 infowindow.open(map,marker);  <!-- AUTOMATICALLY KEEPS INFO WINDOW OPEN UPON LOAD, REMOVE THIS LINE TO INITIATE OPEN INFO WINDOW ON CLICK-->

 google.maps.event.addListener(marker, 'click', function() {
 infowindow.open(map,marker);

 <!-- END INFO WINDOW -->
 
});
});
});

/* ==================================================
   Google Map
================================================== */


#google-container {
 position: relative;
 width: 100%;
 height: 400px;
 background-color: #E19A28;
}

#cd-google-map {
 height: 370px;
 position: relative;
}


#cd-zoom-in, #cd-zoom-out {
 height: 32px;
 width: 32px;
 cursor: pointer;
 margin-left: 50px;
 background-color: rgba(225, 154, 40, 0.75);
 background-repeat: no-repeat;
 background-size: 32px 64px;
 background-image: url("../img/cd-icon-controller.svg");
}

.no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover {
 background-color: #E19A28;
}

#cd-zoom-in {
 background-position: 50% 0;
 margin-top: 50px;
 margin-bottom: 1px;
}

#cd-zoom-out {
 background-position: 50% -32px;
}


/* ==================================================
   Custom Google Map Info Window
================================================== */


.gm-style-iw {
 height: 77px !important;
    left: -95px !important;
    top: 14px !important;
    width: 167px !important;
 background-color: rgba(65, 65, 65, 0.8);
}

#iw-container {
 margin-bottom: 10px;
}

#iw-container .iw-content {
 font-size: 13px;
 line-height: 18px;
 font-weight: 300;
 margin-right: 1px;
 padding: 15px 5px 20px 15px;
 max-height: 140px;
 overflow-y: auto;
 overflow-x: hidden;
 font-family: 'Lato', sans-serif !important;
}

.iw-title {
 color: #FFF;
    font-size: 16px;
    font-weight: 300;
    padding: 0 0 10px;
    text-transform: uppercase;
}

.iw-sub-title {
    color: #E19A28;
}

.iw-tail {
 background-color: #999;
 width: 4px;
 height: 17px;
}

<!-- Google Map -->
<div id="cd-google-map">
 <div id="google-container"></div>
 <div id="cd-zoom-in"></div>
 <div id="cd-zoom-out"></div>
</div>
<!-- End Google Map -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- jQuery Core -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBp9-xuZm7kjfuskVqdCDHn0YeVzZOoC7c"></script> <!-- jQuery Core -->

Answer 1

The problem is here:

iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: -115px !important'});

The left: -115px should be modified. Try to modify it until you have it on the left.