谷歌地图API不显示地图上的页面不确定为什么

它现在是固定的，我猜Twitter的Bootstrap CSS必须与高度和宽度设置为100％相冲突。留下任何有类似问题的人。谷歌地图API不显示地图上的页面不确定为什么

我想实现我的网页上的谷歌地图，当用户点击一个链接，所有的PHP工作正常，但由于某些原因，谷歌地图没有显示，我重新阅读API的所有实例文档和重新读取所有的代码，但仍然没有工作不知道为什么..

这里是显示在地图

注意页面：PHP的正常工作和脚本被在页面加载加载，但地图不是。

<?php 
    /* Include header and config and set variable*/ 
    require_once('config.inc.php'); 
    require_once($rootdir . $dirsubfolder . 'navbar.php'); 
    $route = $_GET['route']; 
?> 

<?php 
/* User wants to retrieve their route */ 
if (isset($route)) { 
?> 


<?php 
/* User wants Route 1 */ 
if (strcmp($route, "sunroute1") == 0) { 
?> 
<script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     } 

     function loadScript() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.googleapis.com/maps/api/js?key=WORKINGKEYk&sensor=true&callback=initialize"; 
     document.body.appendChild(script); 
     } 

    window.onload = loadScript; 
</script> 
<?php 
printf('worked'); 
} else { printf('failed'); } 
?> 

<div class="container"> 
    <div class="hero-unit"> 
     <div id="map_canvas" style="width: 100%; height: 100%"></div> 
    </div> 
</div> 








<?php 
    /* End isset(route) */ 
    } 
    /* Include footer */ 
    require_once($rootdir . $dirsubfolder . 'footer.php'); 
?>

和我的footer.php里面我有

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEYWORKING&sensor=false"></script>

下面是从页

<script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     } 

     function loadScript() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.googleapis.com/maps/api/js?key=WORKING&sensor=true&callback=initialize"; 
     document.body.appendChild(script); 
     } 

    window.onload = loadScript; 
</script> 
worked 
<div class="container"> 
    <div class="hero-unit"> 
     <div id="map_canvas" style="width: 100%; height: 100%"></div> 
    </div> 
</div>

的view source和我的页脚脚本

 <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script src="js/bootstrap-transition.js"></script> 
     <script src="js/bootstrap-alert.js"></script> 
     <script src="js/bootstrap-modal.js"></script> 
     <script src="js/bootstrap-dropdown.js"></script> 
     <script src="js/bootstrap-scrollspy.js"></script> 
     <script src="js/bootstrap-tab.js"></script> 
     <script src="js/bootstrap-tooltip.js"></script> 
     <script src="js/bootstrap-popover.js"></script> 
     <script src="js/bootstrap-button.js"></script> 
     <script src="js/bootstrap-collapse.js"></script> 
     <script src="js/bootstrap-carousel.js"></script> 
     <script src="js/bootstrap-typeahead.js"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?key=WORKING&sensor=false"></script> 
</body> 
</html>

来源

2013-03-03 Datsik

你在任何地方调用你的initialize（）函数吗？ – OzBarry 2013-03-03 05:08:13

@OzBarry设法解决它，CSS令人伤心地：/谢谢。 – Datsik 2013-03-03 05:08:52

啊，没问题。 – OzBarry 2013-03-03 05:10:43

它现在是固定的，我猜Twitter Bootstrap CSS必须与将高度和宽度设置为100％相冲突。留下任何有类似问题的人。

来源

2013-03-03 05:40:24 Datsik

2天内不能接受我自己的答案。 – Datsik 2013-03-03 05:40:37

此外，你可能想看看这个：http://hpneo.github.com/gmaps/ – 2013-03-03 07:35:26

@ShaneReustle谢谢你。 – Datsik 2013-03-03 07:38:14

你说得对，该height:100%是问题，但它不是自举一个神秘的冲突。您没有足够显示您的代码以确定哪些是错误的，但多次看到并经历过类似的问题，我很清楚它可能是什么。

我怀疑在初始化地图时，hero-unit元素尚未被赋予高度或宽度，因此其高度为零。因此，map_canvas元素的高度也为零。毕竟，零的100％是零。

当您拨打new google.maps.Map()时，它会使用您给它的map_canvas元素的当前高度（即零）创建地图。这不太好。

即使你以后给hero-unit的高度，不解决它。当然，height:100%现在会导致map_canvas也调整大小以匹配，但Maps API不知道发生了这种情况！

可以解决这个问题不管是你后没有通过在进行此调用给你map_canvas元素一个明确的高度，或者该元素被调整大小：

google.maps.event.trigger(map, 'resize');

这告诉地图API来看看新的元素大小并相应地调整。如果您想要可调整大小的地图，也可以拨打电话：侦听地图元素上的resize事件，并在事件触发时进行呼叫。

为了说明这一点，让我们来看看你的代码的一个非常简化的版本，一些日志中抛出：

<!DOCTYPE html> <html> <head> <title>CSS Width and Height Test</title> </head> <body onload="test()"> <div id="container"> <div id="hero-unit"> <div id="map_canvas" style="width: 100%; height: 100%" ></div> </div> </div> <script> function test() { var hero = document.getElementById('hero-unit'); var canvas = document.getElementById('map_canvas'); console.log( 'Canvas size before setting hero size: ' + canvas.offsetWidth + 'x' + canvas.offsetHeight ); hero.style.height = '300px'; hero.style.width = '400px'; console.log( 'Canvas size after setting hero size: ' + canvas.offsetWidth + 'x' + canvas.offsetHeight ); } </script> </body> </html>

保存该网页，查看它在你喜欢的浏览器的开发者工具控制台打开，这样你可以看到日志消息。例如，在Windows版Chrome上，使用F12键打开开发人员工具，然后单击“控制台”选项卡。

您应该看到这样的事情（宽度值将取决于您的浏览器窗口的宽度）：

Canvas size before setting hero size: 1244x0 css-height.html:20 Canvas size after setting hero size: 400x300 css-height.html:29

正如你所看到的，之前其母公司的大小，该map_canvas高度为零，并且其宽度放大您可能已经预料到了。

一些相关的评论：

如果你不习惯使用浏览器的开发者工具为我们所做的，花一些时间，并熟悉它们。 Chrome尤其在该开发人员面板中拥有一套非常棒的工具。您可以在任何地方通过添加此语句设置在JavaScript代码中设置断点：

debugger;

或由开发者工具查看源文件，并单击左边距。当浏览器停在断点处时，您可以检查JavaScript变量和各种事物。您可以使用开发人员工具面板中的元素标签随时检查您的DOM元素。对于这个bug，你可以在元素选项卡树视图中找到你的map_canvas，并查看它的计算样式 - 在那里你会发现高度为零。

另外，在调试Maps API代码时，您可以省去一些麻烦完全忽略了您的PHP代码。 Maps API是一个JavaScript API。它没有看到你的PHP代码;它甚至不知道你用PHP写了你的网站。它看到的仅仅是传递给浏览器的最终HTML/CSS/JavaScript代码。

最后，它看起来像两次加载Maps API，首先是内联脚本，后来是异步方法。一旦充足。除非需要异步加载，否则为了简单起见，我会坚持使用内联脚本。

来源

2013-03-03 09:43:25

谷歌地图API不显示地图上的页面不确定为什么

回答

相关问题