infowindow hiding the marker with google map api v3.36

[wholeinsoul]

Kindly refer to the stackoverflow link for the issue details:
https://stackoverflow.com/questions/54821001/google-maps-v3-36-infowindow-is-hiding-the-marker

I noticed that this is happening only with ng-map and all its examples like here:
https://ngmap.github.io/#/!infowindow-simple-max.html

But not happening with native google map like here:
https://google-developers.appspot.com/maps/documentation/javascript/examples/full/infowindow-simple

Thanks.

[lucashby]

Will there be a fix for this? This is functionality that is truly needed.

[lfhenaol]

If you comment o remove this line, you will fix the marker. For me worked.

Why coment or remove this line?
The element infoWindowContainerEl has the class gm-style-iw-t whose default styles define the marker and this line tries replaced already exiting class with other class. Therefore replace or delete the class gm-style-iw-t involves that marker will hide.

angularjs-google-maps/directives/info-window.js

Line 116 in 8d485a6

infoWindowContainerEl.className = "ng-map-info-window";

[lucashby]

If you comment o remove this line, you will fix the marker. For me worked.

Why coment or remove this line?
The element infoWindowContainerEl has the class gm-style-iw-t whose default styles define the marker and this line tries replaced already exiting class with other class. Therefore replace or delete the class gm-style-iw-t involves that marker will hide.

angularjs-google-maps/directives/info-window.js

Line 116 in 8d485a6

infoWindowContainerEl.className = "ng-map-info-window";

This is really good info, but I'm using the npm package and would prefer to keep it that way if i can. Anyone do a pull request for this? Does the maintainer take pull requests?

[wholeinsoul]

FWIW: By overiding the following css classes, at least I have been able to move the infowindow above the marker but tail still hides somewhere behind the infowindow. Kindly note that it may break with future google maps update so I fixed my google map version.

.gm-style .gm-style-iw-c{
    /* transform: translate(-50%,-100%); */
    transform: translate(-50%,-110%);
}

<script src="//maps.googleapis.com/maps/api/js?v=3.38&libraries=places&key=<my key>"></script>

[lucashby]

I simply used the 2 above suggestions and united them into 1 simple solution. Simply add the necessary class info for ng-map-info-window that would have been applied to gm-style-iw-t. Worked great for me.

.ng-map-info-window {
    position: absolute;
    width: 100%;
}

.ng-map-info-window::after {
    background: white;
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4);
    content: "";
    height: 15px;
    left: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 15px;
}