Question

我正在使用谷歌地图在我的网站上显示很多兴趣点，但它实际上无法正常工作。最奇怪的是，在实践中，它的工作原理是因为标记和簇正在正常工作，并且连接的动作也在起作用，但是地图没有显示，所以地图区域中的所有内容都是灰色的。最奇怪的是它可以从Mobile正常工作。

Here a screenshot of the map.

Link to the website

HTML

<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>

JS

.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%;
}

CSS

{{1}}

Answer 1

我发现了问题：

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

我添加了

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

一切正常。

谷歌地图不能渲染，但标记/群集工作（灰色地图区域）

1 个答案: