谷歌地图可以使用但没有任何地图显示？

Question

I've embedded a Google Map into my application. Interacting with the map works. Responding to map events works (map zoom_changed , marker dragend , etc). However, only some parts of the map are visible (the marker and the Google logo for example), but the maps themselves are not (at least they don't appear 95% of the time).

Can anyone tell me what's going on here?

EDIT : I'm using this as a KnockoutJS component (inserted with with <gui-map></gui-map> ). The source code below. I don't believe the use of KnockoutJS has anything to do with the map issues because: a) all the observables are wired up correctly and working 100% of the time; and b) the map does work randomly without any code changes 5% of the time.

define(['knockout', 'underscore'], function(ko, _){

    function Map(params, componentInfo) {
        var self = this;

        var defaultPosition = {lat:-25,lng:-130};
        var width = ko.isObservable(params.width) ? params.width : ko.observable(params.width ? params.width : '100px');
        var height = ko.isObservable(params.height) ? params.height : ko.observable(params.height ? params.height : '100px');
        var center = ko.isObservable(params.center) ? params.center : ko.observable(params.center ? params.center : defaultPosition);
        var zoom = ko.isObservable(params.zoom) ? params.zoom : ko.observable(params.zoom ? params.zoom : 12);
        var marker = ko.isObservable(params.marker) ? params.marker : ko.observable(params.marker ? params.marker : defaultPosition);

        var element = componentInfo.element;
        element.style.display = 'block';
        element.style.width = width();
        element.style.height = height();

        width.subscribe(function(){
            element.style.width = width();
        });

        height.subscribe(function(){
            element.style.height = height();
        });

        function onObservableCenterChanged(newValue){
            onObservableCenterChanged.changing = 1;
            console.log('updating center map');
            map.setCenter(newValue);
            setTimeout(function(){
                onObservableCenterChanged.changing = 0;
            }, 500);
        }
        center.subscribe(onObservableCenterChanged);

        function onObservableZoomChanged(newValue){
            onObservableZoomChanged.changing = 1;
            console.log('updating map zoom');
            map.setZoom(newValue);
            setTimeout(function(){
                onObservableZoomChanged.changing = 0;
            }, 500);
        }
        zoom.subscribe(onObservableZoomChanged);

        var map = new google.maps.Map(element, {
            center: center(),
            zoom: zoom()
        });

        var mapMarker = new google.maps.Marker({
            position:center(),
            map:map,
            title:'',
            draggable:true
        });

        map.addListener('center_changed', (function(){
            var mapCenterChangeTimeout;

            return function(){
                if (mapCenterChangeTimeout) {
                    clearTimeout(mapCenterChangeTimeout);
                }

                mapCenterChangeTimeout = setTimeout(function(){
                    if (!onObservableCenterChanged.changing) {
                        var newCenter = map.getCenter();

                        console.log('updating center observble');

                        center({
                            lat:newCenter.lat(),
                            lng:newCenter.lng()
                        });
                    }
                }, 500);
            };
        })());

        map.addListener('zoom_changed', (function(){
            var mapZoomChangedTimeout;

            return function(){
                if (mapZoomChangedTimeout) {
                    clearTimeout(mapZoomChangedTimeout);
                }

                mapZoomChangedTimeout = setTimeout(function(){
                    if (!onObservableZoomChanged.changing) {
                        console.log('updating zoom observable');
                        zoom(map.getZoom());
                    }
                }, 500);
            };
        })());

        mapMarker.addListener('dragend', function(){
            var newPosition = mapMarker.getPosition();
            marker({
                lat:newPosition.lat(),
                lng:newPosition.lng()
            });
        });
    }

    ko.components.register('gui-map', {
        template:{
            require:'text!components/gui/map.html'
        },
        viewModel:{
            createViewModel:function(params, componentInfo){
                return new Map(params, componentInfo);
            }
        }
    });

});

EDIT2 : I have succesfully got the above to work by wrapping the entire body of the Map function (with exception of the var self = this; assignment) in a anonymous function called with setTimeout() (with a delay of 5000 ms). However, all the code executes after the DOMContentLoaded event anyway, so I'm not sure why this is an issue.

Answer 1

The cause of the problem was that the Google Maps Javascript API does NOT render the map correctly if the element in which the map is contained is not visible. In my situation, the map was located in a hidden tab. The timeout mentioned above solved the problem because the delay gave me long enough to switch tabs before the function that calls the Google Maps API could be executed (if I delayed opening the tab until after the Google Maps API was called, the issue would re-surface).

I got around this issue by manually triggering a resize on the map, and manually updating the various controls on the map, eg:

google.maps.event.trigger(map, 'resize');
infoWindow.setContent(infoWindowElement);
infoWindow.close();
infoWindow.open(map, marker);

I hope this solution helps someone else.