CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsng-map
Chris Halcrow
Chris Halcrow

Reputation: 31960

Ng-map - infowindow on markers sometimes not appearing

I'm using the ng-map directive to display a map. The map has markers that show an infowindow whenever there's a mouseover on the marker. Sometimes however, the infowindow doesn't appear.

Other than this, I haven't been able to identify any pattern to what's happening, as the problem occurs for a different marker each time. I'm outputting data to the infowindow however the issue doesn't seem to be 'data related' as all data for the selected location seems to be correct at the point where the issue occurs.

I have a showInfo method that is being called on a mouseover like this:

showInfo(event, loc, infoWindowTemplate, map, mapsController) {

Here is the body of the method:

        map.getMap(mapsController.mapId).then(function (myMap) {

            var selectedMarker = myMap.markers["L: " + loc.position[0] + ", " + loc.position[1]];
            selectedMarker.locationInfo = loc;

            console.log("about to show infowindow - infoWindowTemplate = " + infoWindowTemplate);
            // console output = "cached-myTemplate.html"

            myMap.showInfoWindow(infoWindowTemplate, selectedMarker);

selectedMarker is definitely referring to the correct marker object. My template looks like this:

<script id="cached-myTemplate.html" type="text/ng-template">
        <a class="map-location__link" href="/locations/{{anchor.locationInfo.locationId}}" target="_blank">
                <img src="{{anchor.locationInfo.locationImageThumbnail}}" />
        </a>
</script>

The issue seems to be that calling 'showInfoWindow' is intermittently failing somehow (although there are no errors in the console). Any comments or answers with ideas of what may be causing the issue or what else I can do to diagnose it will be appreciated!

Upvotes: 1

Views: 307

Answers (1)

Chris Halcrow
Chris Halcrow

Reputation: 31960

I discovered that this is a timing issue. Delaying the 'turn' in which showInfoWindow is called (by adding a short timeout) fixed the issue:

map.getMap(mapsController.mapId).then(function (myMap) {

            ....

            this.$timeout(function () {
                dealmap.showInfoWindow(infoWindowTemplate, selectedMarker);
            }, 100)

}.bind(this));

Upvotes: 1

Related Questions