Google Map V3 Grey Tiles 响应式

Question

我正在使用 Google Maps V3，一切正常，预计灰色瓷砖问题，我不知道如何解决，我也尝试过

google.maps.event.trigger(map, "resize");

但它不起作用或我粘贴错误。

当我尝试移动地图时出现灰色瓷砖，仅呈现具有宽度和高度的地图窗口，其余为灰色，当我使用百分比时，整个地图都是灰色的，我该如何解决这个问题？

<script type="text/javascript">

    $(document).ready(function () {

        var styleArray = [{
            "featureType": "administrative.locality",
            "elementType": "labels.text.fill",
            "stylers": [{
                "color": "#365B6A"
            }]
        }, {
            "featureType": "road.highway",
            "elementType": "labels.text",
            "stylers": [{
                "visibility": "on"
            }]
        }, {
            "featureType": "landscape.man_made",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#c4d3dc"
            }, {
                "weight": 0.1
            }]
        }, {
            "featureType": "landscape.man_made",
            "elementType": "geometry.stroke",
            "stylers": [{
                "color": "#ffffff"
            }]
        },

            {
                "featureType": "landscape.natural",
                "elementType": "all",
                "stylers": [{
                    "visibility": "simplified"
                }, {
                    "color": "#e1e9ee"
                }]
            }, {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "featureType": "water",
                "elementType": "all",
                "stylers": [{
                    "visibility": "on"
                }]
            }, {
                "featureType": "transit.station",
                "elementType": "all",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "geometry.fill",
                "stylers": [{
                    "color": "#cfc824"
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "geometry.stroke",
                "stylers": [{
                    "color": "#cfc824"
                }]
            }, {
                "featureType": "road.arterial",
                "elementType": "geometry.stroke",
                "stylers": [{
                    "color": "#4d6d7a"
                }, {
                    "weight": 0.5
                }]
            }, {
                "featureType": "road.arterial",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "color": "#4d6d7a"
                }]
            }, {
                "featureType": "road.local",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "color": "#4d6d7a"
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "color": "#385c6b"
                }]
            }];


        var submoem = '/media/image/marker.png';
        var primarymoem = '/media/image/marker-main.png';

        var geocoder;
        var markersArray = [];

        var locationsArray = [
            '{$Data.bwrk_gmap_substore1}',
            '{$Data.bwrk_gmap_substore2}',
            '{$Data.bwrk_gmap_substore3}',
            '{$Data.bwrk_gmap_substore4}'
        ];

        function plotMarkers() {
            for (var i = 0; i < locationsArray.length; i++) {

                codeAddresses(locationsArray[i]);

            }
        }


        geocoder = new google.maps.Geocoder();
        latlang = geocoder.geocode({
            'address': '{$Data.bwrk_gmap_mainstore}'
        }, function (results, status) {

            marker = new google.maps.Marker({
                map: map,
                icon: primarymoem,
                position: results[0].geometry.location
            });

            google.maps.event.trigger(map, 'resize');
            map.setCenter(results[0].geometry.location);



            markersArray.push(marker);
        });


        var mapOptions = {
            {if $Data.bwrk_gmap_style}styles: styleArray, {/if}
            center: latlang,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,

            mapTypeControl: {if $Data.bwrk_gmap_maptypecontrol}false{else}true{/if},
            scaleControl: {if $Data.bwrk_gmap_scaleControl}false{else}true{/if},
            zoomControl: {if $Data.bwrk_gmap_zoomControl}false{else}true{/if},
            panControl: {if $Data.bwrk_gmap_panControl}false{else}true{/if},
            navigationControl: {if $Data.bwrk_gmap_navigationControl}false{else}true{/if},
            streetViewControl: {if $Data.bwrk_gmap_streetViewControl}false{else}true{/if}
        };

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        plotMarkers();

        function codeAddresses(address) {
            geocoder.geocode({
                'address': address
            }, function (results, status) {

                if (results.length > 0) {
                    new google.maps.Marker({
                        map: map,
                        icon: submoem,
                        position: results[0].geometry.location
                    });
                }
            });
        }
    });

    $.ajax({
        async: false,
        url: this.href,
        success: function (result) {
            console.log('success');
        },
        error: function (xhr, ajax, err) {
            console.error('error: ' + JSON.stringify(xhr));
            console.error(JSON.stringify(err));
        }
    });


</script>
<style>
     #map-canvas {
        width: 100%;
        height: 100%;
    }
</style>
<div id="map-canvas"></div>

Answer 1

如果仅在指示高度百分比时出现灰色部分的问题，可能是因为它不是分配给包含地图所在div的标签的高度。通常是html 和body 标签，或者如果您使用作为页面容器的div 框架。

尝试添加

html, body {
    height: 100%;
}

Answer 2

我必须在谷歌地图调用中添加 v=3