谷歌地图空 - javascript

时间:2014-11-06 23:41:57

标签: javascript google-maps google-maps-api-3 google-maps-markers

我不明白为什么我会看到这个灰色的空白空间。我添加了.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>

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

尝试

mapcanvas.style.width = '100px'; 

(或其他相关宽度)而不是100%