javascript - 谷歌地图不渲染但标记/集群工作(灰色 map 区域)

Question

我正在使用 Google map 在我的网站上显示很多兴趣点，但它实际上不起作用。最奇怪的是，在实践中，它之所以有效，是因为标记和集群工作正常，连接的 Action 也在工作，但 map 没有显示， map 区域的所有内容都是灰色的。最奇怪的是它可以在移动设备上正常工作。

Here a screenshot of the map.

Link to the website

HTML

<div class="container-explore">
    <div class="half-col half-map">
        <div class="header-map" id="map"></div>
    </div>

    <div class="half-col half-list">
      ....
    </div>
</div>

JS

<script>
    var center = italy;
    var zoom = 6;
</script>

@if(isset($lat, $lng))
<script>
    var center = {lat: {{$lat}}, lng: {{$lng}}};
    var zoom = 14;
</script>
@elseif(Request::has('lat') and Request::has('lng') and Request::has('formatted_address'))
<script>
    var center = {lat: {{Request::input('lat')}}, lng: {{Request::input('lng')}}};
    var zoom = 14;
</script>
@endif
<script>    
    var markers = [];
    var mapObject;
    function init_map() {
        var mapOptions = {
            zoom: zoom,
            center: new google.maps.LatLng(center),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
        };
        var marker;

        (function(A) {

            if (!Array.prototype.forEach)
                A.forEach = A.forEach || function(action, that) {
                    for (var i = 0, l = this.length; i < l; i++)
                        if (i in this)
                            action.call(that, this[i], i, this);
                };

        })(Array.prototype);

        mapObject = new google.maps.Map(document.getElementById('map'), mapOptions);

        setTimeout(function() {
            update_markers_half();
        }, 1500);

        mapObject.addListener('dragend', function() {
            update_markers_half();
        });
        mapObject.addListener('zoom_changed', function() {
            update_markers_half();
        });
    }

    $(window).load(function() {
        $(".container-explore").css("height", $(window).height());
        init_map();
    });

    $(window).resize(function() {
        $(".container-explore").css("height", $(window).height());
    });

    var geo = $("#city-search");
    $(geo).geocomplete().bind("geocode:result", function(event, result){
        mapObject.setCenter(result.geometry.location);
        mapObject.setZoom(13);
        update_markers_half();

    });
    $.fn.geocomplete(geo)

    $(document).ready(function() {
        $(".minimize-explore").click(function(e) {
            e.preventDefault();

            $(".container-explore-list").fadeToggle();
            if($(this).children("i").attr("class") == 'icon-menu') {
                $(this).children("i").attr("class", 'icon-cancel');
            } else {
                $(this).children("i").attr("class", 'icon-menu');
            }
        })
    })

</script>

CSS

.container-explore {
    height: 100%;
    overflow: hidden;
}

.half-col {
    width: 50%;
    float: left;
}

.half-col.half-map {
    height: 388px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.half-col.half-list {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    padding: 15px;
    margin-top: 105px;
}

.container-explore #map {
    height: 100%;
}

Answer 1

我发现了问题:

img {
  max-width: 100%;
  max-height: 100%;
}

我添加了

#map img {
  max-width: none;
  max-height: none;
}

一切正常。