Google地图控件显示但没有地图内容

时间:2013-12-27 06:15:46

标签: javascript html google-maps jquery-mobile

我将long / lat值作为网页上的url paramaters传递,我可以看到当我使用提醒功能时它们被正确读取

但由于某种原因地图控件加载但地图仍为空白

任何人都可以看到我出错的地方

这是一个长期存在的问题,我花了很多时间才回到没有成功的地方

我正在使用的代码如下

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>Map</title>
            <script>

               function gup(name) {
                   name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
                                         var regexS = "[\\?&]" + name + "=([^&#]*)";
                                         var regex = new RegExp(regexS);
                                         var results = regex.exec(window.location.href);
                                         if (results == null)
                                         return "";
                                         else
                                         return results[1];
                                         }
                    var latlong=(gup('q'));
                                 //  alert(latlong);


                function initialize() {
                    var myLatlng = new google.maps.LatLng(latlong);
                    var myOptions = {
                        zoom: 16,
                        center: myLatlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    var map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );

                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        center: myLatlng,
                        title: 'Hello World!'
                        });
                }
            </script>
            <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <style>
                html {
                    height: 100%;
                    overflow: hidden;
                }
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            #map_canvas { 
                height: 100%;
            }    
            </style>
    </head>
    <body onload="initialize()">

        <div id="map_canvas"></div>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)

我有同样的错误,我知道它是由overflow:hidden;引起的。

也许这适合你:

div[id^=map_canvas], 
div[id^=map_canvas] div {overflow: auto;}

归功于"ScottS"