Single grey tile on styled Google Map

Question

Everything works fine in my Google map, except that there is always a single tile that doesn't load properly. It is usually bottom right or top left, but occasionally it's right in the middle. Triggering a "resize" event does not fix the problem, even after adding a timeout. You can drag the map around, and there is always a grey tile somewhere.

I thought it had something to do with the styled map, as we've written dozens of unstyled Google maps before, and never encountered this issue. However, it also happens on an unstyled map.

Same behavior in Chrome, Firefox and Safari on Mac, Safari on iOS.

Here is the map in production: brytecore.com/contact-us. Here is the script:

var map;

/**
 * Build the google map.
 */
function initialize_gmap() {
    var bc_latlng = new google.maps.LatLng( 33.912959, -84.359551 );
    var styles = [
        {
            featureType: 'road.highway',
            elementType: 'geometry',
            stylers: [
                {visibility: 'simplified'},
                {color: '#42d0ff'}
            ]
        }, {

        // bunch of stylers omitted for brevity

            featureType: 'poi.medical',
            elementType: 'labels.text',
            stylers: [
                {visibility: 'simplified'}
            ]
        }, {}
    ];

    var mapOptions = {
        mapTypeControlOptions: {
            mapTypeIds: [ 'Styled' ]
        },
        center: bc_latlng,
        zoom: 10,
        panControl: false,
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: true,
        overviewMapControl: false,
        scrollwheel: false,
        mapTypeId: 'Styled'
    };

    if ( jQuery( 'body' ).hasClass( 'is_mobile' ) ) {
        mapOptions.draggable = false;
    }
    map = new google.maps.Map( document.getElementById( "map" ), mapOptions );
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled'});
    map.mapTypes.set('Styled', styledMapType);

    var content = "<div class='contact-iw'><div class='contact-iw-title'>Brytecore, LLC</div><p>5775-D Glenridge Drive<br>Suite 425<br>Atlanta, GA 30328</p><p>(844) GO-BRYTE</p></div>";
    var infowindow = new google.maps.InfoWindow( {
        backgroundColor: 'rgb(57,57,57)',
        content: content,
        position: bc_latlng
    } );
    infowindow.open( map );
}

google.maps.event.addDomListener( window, 'load', initialize_gmap );
google.maps.event.addDomListener( window, 'resize', function () {
    var center = map.getCenter();
    google.maps.event.trigger( map, "resize" );
        map.setCenter( center );
    } );

Thanks in advance.

Answer 1

Most likely the appearance of gray area is caused by the following css rule declared in contact.min.css file:

#map.google-map>div.gm-style>div>div>div:last-child>div:first-child>div:last-child img {
    display: none
}

Since the specified rule hides a image tile, after deleting it all the tiles will be rendered properly.

Modified example

var map;

/**
 * Build the google map.
 */
function initialize_gmap() {
    var bc_latlng = new google.maps.LatLng(33.912959, -84.359551);
    var styles = [
        {
            featureType: 'road.highway',
            elementType: 'geometry',
            stylers: [
                { visibility: 'simplified' },
                { color: '#42d0ff' }
            ]
        }, {

            // bunch of stylers omitted for brevity

            featureType: 'poi.medical',
            elementType: 'labels.text',
            stylers: [
                { visibility: 'simplified' }
            ]
        }, {}
    ];

    var mapOptions = {
        mapTypeControlOptions: {
            mapTypeIds: ['Styled']
        },
        center: bc_latlng,
        zoom: 10,
        panControl: false,
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: true,
        overviewMapControl: false,
        scrollwheel: false,
        mapTypeId: 'Styled'
    };

    if (jQuery('body').hasClass('is_mobile')) {
        mapOptions.draggable = false;
    }
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
    map.mapTypes.set('Styled', styledMapType);

    var content = "<div class='contact-iw'><div class='contact-iw-title'>Brytecore, LLC</div><p>5775-D Glenridge Drive<br>Suite 425<br>Atlanta, GA 30328</p><p>(844) GO-BRYTE</p></div>";
    var infowindow = new google.maps.InfoWindow({
        //backgroundColor: 'rgb(57,57,57)',
        content: content,
        position: bc_latlng
    });
    infowindow.open(map);
}

google.maps.event.addDomListener(window, 'load', initialize_gmap);
google.maps.event.addDomListener(window, 'resize', function () {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});

.inside-page-footer {
    position: relative;
    max-width: 400px;
    padding-bottom: 20px;
    margin: 0 auto;
    overflow: hidden;
    visibility: visible
}

.inside-page-footer .google-map {
    width: 100%;
    height: 300px
}


.contact-iw p {
    margin: 5px 0 0;
    font-size: .95em;
    font-weight: 400;
    line-height: 1.3em;
    color: #aedbea
}

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?sensor=false&#038;ver=4.2.2'></script>
<div class="inside-page-footer">
   <div class="google-map" id="map"></div>
</div>