Change Google Maps marker arrow's position using css

google-maps-api-marker-arrow.css

.gm-style div div:nth-child(3) div div div div:nth-child(1) div:nth-child(1){ position: static !important; }
.gm-style div div:nth-child(3) div div div div:nth-child(1) div:nth-child(3){ display: none !important; }
.gm-style .gm-style-iw{ overflow: visible; }
.gm-style .gm-style-iw::before {
    content: "\f141";
    position: absolute;
    top: -7px;
    left: -47px;
    font-family: 'dashicons';
    font-size: 50px;
    color: #808080;
}
.gm-style .gm-style-iw::after {
    content: "\f141";
    position: absolute;
    top: -7px;
    left: -46px;
    font-family: 'dashicons';
    font-size: 50px;
    color: #fff;
}
.gm-style div div:nth-child(3) div div:nth-child(4) div:nth-child(2) .gm-style-iw::before,
.gm-style div div:nth-child(3) div div:nth-child(4) div:nth-child(4) .gm-style-iw::before{ 
    content: "\f139";
    left: auto; 
    right: -45px; 
}
.gm-style div div:nth-child(3) div div:nth-child(4) div:nth-child(2) .gm-style-iw::after,
.gm-style div div:nth-child(3) div div:nth-child(4) div:nth-child(4) .gm-style-iw::after{ 
    content: "\f139";
    left: auto;
    right: -44px; 
}