谷歌地图API在网页上不显示地图，不确定原因。

Question

现在已经修复了，我猜Twitter Bootstrap CSS可能与将高度和宽度设置为100%发生冲突。留给有类似问题的任何人。

我正在尝试在我的网页上实现Google地图，当用户点击链接时，所有PHP都正常工作，但由于某些原因，Google地图没有显示出来。我重新阅读了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>

我的脚本放在页脚

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

- Datsik

---

你在任何地方调用了 initialize() 函数吗？ - OzBarry

@OzBarry 成功解决了，不过是 CSS 的问题 :/ 还是谢谢你。 - Datsik

啊，好的，没问题。 - OzBarry

将您的解决方案作为答案，并将其标记为答案以关闭问题。 - Kirk

@Kirk 当用户的声望低于10时，提问后8个小时内无法回答自己的问题。您将在7个小时内可以回答。在那之前，请使用评论或编辑您的问题。 - Datsik

Answer 1

现在已经解决了，我猜 Twitter Bootstrap CSS 与将高度和宽度设置为100％的设置发生了冲突。留给任何遇到类似问题的人。

- Datsik

---

@ShaneReustle 不确定你是否使用过那个gmaps js，但是我似乎无法让它工作，尽管它声称很容易，我遇到了一些问题。http://pastebin.com/q19jBK4m div没有加载地图，你有什么想法吗？ - Datsik

Answer 2

你说的没错，height:100% 是问题所在，但这并不是与Bootstrap发生神秘冲突。由于你没有展示足够的代码，无法确定具体出了什么问题，但我经常遇到类似的问题，因此有一个比较好的想法。

我怀疑在初始化地图时，hero-unit 元素还没有被赋予高度或宽度，因此它的高度为零。因此，map_canvas 元素的高度也为零。毕竟，零的百分之百还是零。

当你调用 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元素。对于此错误，您可以在元素选项卡树视图中找到map_canvas，并查看其计算样式 - 在那里您会发现高度为零。

另外，调试Maps API代码时，请完全忽略您的PHP代码，以免浪费时间。 Maps API是一个JavaScript API。它看不到您的PHP代码；它甚至不知道您是用PHP编写网站的。它所看到的只是传递给浏览器的最终HTML / CSS / JavaScript代码。

最后，看起来您正在两次加载Maps API，首先是使用内联脚本，然后是使用异步方法。一次就足够了。除非需要异步加载，否则建议使用内联脚本以保持简单。

- Michael Geary