Google Map Пусто - javascript

Question

Я не понимаю, почему я вижу это серое пустое пространство. Я добавил .gmnoprint img {max-width: none; } в моем css. http://www.umatechcorner.com/map-empty.jpg

Но все же я вижу это.

Карта отображается в toggable 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%