Grey Tile after Map Marker applied in Google map in Angularjs

Question

Using angular-google-maps 1.0.18 The map loads perfectly fine, problem rises a marker is added. A square containing the marker turns grey in the map. I have tried using solutions suggested in another questions as well. But it is making no difference. Any clues to how to resolve this.

Grey boxes appear in parts of embedded Google Map in modal box

Code for reference :

var cities = [
        {
            city : 'Toronto',
            desc : 'This is the best city in the world!',
            lat : 43.7000,
            long : -79.4000
        },
        {
            city : 'New York',
            desc : 'This city is aiiiiite!',
            lat : 40.6700,
            long : -73.9400
        },
        {
            city : 'Chicago',
            desc : 'This is the second best city in the world!',
            lat : 41.8819,
            long : -87.6278
        },
        {
            city : 'Los Angeles',
            desc : 'This city is live!',
            lat : 34.0500,
            long : -118.2500
        },
        {
            city : 'Las Vegas',
            desc : 'Sin City...\'nuff said!',
            lat : 28.65596033103927,
            long : 77.2226215342037
        }
    ];

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
    console.log($scope.map);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function (info){

        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.long),
            title: info.city
        });
        marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });

        google.maps.event.trigger($scope.map, 'resize');
        //$scope.map.setCenter(new google.maps.LatLng(22.3605336, -72.6362989));

        $scope.markers.push(marker);

        //google.maps.event.trigger($scope.map, 'resize');

    }  

    for (i = 0; i < cities.length; i++){
        createMarker(cities[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker){
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }

HTML :

<div>
    <div id="map"></div>
    <div id="class" ng-repeat="marker in markers | orderBy : 'title'">
         <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
    </div>
</div>

Answer 1

We had this issue, which looked exactly like the OP's screenshot.

The issue for us was that we were using a javascript library called dropzone which required us to apply CSS styling to 'canvas' as follows:

 canvas {
    -moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
    -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
    background-color: #f3f3f3;
    border: 1px solid #c3c3c3;
    box-shadow: 3px 3px 3px 0 #e3e3e3;
    height: 100px;
    margin: 6px 0 0 6px;
}

This styling was inadvertently being applied to the Google Map canvas, which was causing the 'grey box' to appear on the map when a marker was added.

Remove any styling which would apply to all 'canvas' elements and use a class/id selector instead as appropriate so that you don't inadvertently apply the style to your Google Map canvas.