谷歌地图控件显示但没有地图内容答案

【问题标题】：Google Map control displays but no mapping content谷歌地图控件显示但没有地图内容
【发布时间】：2013-12-27 06:15:46
【问题描述】：

我在页面上将 long / lat 值作为 url 参数传递，当我使用警报功能时，我可以看到它们被正确读取

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

谁能看到我哪里出错了

这是一个长期存在的问题，我花了好几周的时间来解决，但没有成功

我使用的代码如下

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

【问题讨论】：

google.maps.LatLng() 需要 2 个参数，纬度和经度，但您只传递 1 个参数

标签： javascript html google-maps jquery-mobile

【解决方案1】：

我遇到了同样的错误，我知道这是由 overflow:hidden; 引起的。

也许这对你有用：

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

感谢"ScottS"

【讨论】：

刚刚测试了问题中提供的代码，解决方案是provided by Dr.Molle in comments。你的 CSS 实际上让 everything 消失了：/
:( 我 cri，希望来自问题的人会看到 Dr.Molle 的回复 :) gj @brasofilo。我没有时间测试代码，工作......虽然答案对我不起作用。