谷歌地图空-javascript

我不明白为什么我看到这个灰色的空白。我在css中添加了.gmnoprint img｛max-wid:none；｝。http://www.umatechcorner.com/map-empty.jpg

但我还是看到了这一点。

地图显示在可切换的分区中。

下面是代码

                            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
                            <article style="height: 400px;">
                            </article>
                            <script>
                                function success(position) {
                                    var mapcanvas = document.createElement('div');
                                    mapcanvas.id = 'mapcontainer';
                                    mapcanvas.style.height = '400px';//myHeight+'px';
                                    mapcanvas.style.width = '100%';
                                    document.querySelector('article').appendChild(mapcanvas);
                                    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                                    var options = {
                                        zoom: 10,
                                        center: coords,
                                        mapTypeControl: false,
                                        navigationControlOptions: {
                                            style: google.maps.NavigationControlStyle.SMALL
                                        },
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                                    };
                                    var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
                                    var latlngbounds = new google.maps.LatLngBounds();
                                    var marker = new google.maps.Marker({
                                          position: coords,
                                          map: map,
                                          title:"You are here!",
                                          icon : "/img/Map-Marker-Azure.png"
                                    });
                                    latlngbounds.extend(marker.position);
                                    var myTable = document.getElementById("markerTable");
                                    var myLength = myTable.rows.length;
                                    var infowindow = new google.maps.InfoWindow({ maxWidth: 360 });
                 google.maps.event.addListener(map, "click", function () {
                                        infowindow.close(); 
                                    });
                                }
                                if (navigator.geolocation) {
                                    navigator.geolocation.getCurrentPosition(success);
                                } else {
                                    error('Geo Location is not supported');
                                }
                            </script>
                                        </div>

有人能帮忙吗？