谷歌地图空 - javascript

Question

我不明白为什么我会看到这个灰色的空白区域。我添加了 .gmnoprint img { max-width: none; } 在我的 CSS 中。 http://www.umatechcorner.com/map-empty.jpg

但我仍然看到这一点。

地图显示在一个可切换的 div 中。

下面是代码

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

有人可以帮忙吗？

Answer 1

试试

mapcanvas.style.width = '100px'; 

（或其他相关宽度）而不是 100%