Google Maps API 空白输出答案

【问题标题】：Google Maps API blank outputGoogle Maps API 空白输出
【发布时间】：2016-07-07 12:44:37
【问题描述】：

我有一个页面来显示谷歌地图输出，并在页面上设置了一组（40 多个）自定义标记（这是对现有系统的重新开发（但编码不佳）。

我的问题是地图没有输出，<div id='map'>里面没有内容。浏览器控制台上没有错误，所以对于如何解决这个问题有点茫然。

我已经注释掉了我的代码的各个部分（例如标记放置），但这似乎也无法解决它。

页面代码：

<!DOCTYPE html>
<head>

<script type="text/javascript">
         function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 11,
         /*     mapTypeId: google.maps.MapTypeId.ROADMAP,*/
                center: {lat: 52.345617, lng: 1.502666}
            });

         /**   setMarkers(map);**/

        /***
            infowindow = new google.maps.InfoWindow({
                content: "holding..."
            });**/
        }

      /*** map still loads blank even when commenting all the below JS **/
      /***
        var places = [
            // Name | lat | long | order | infoWindowDescr
            ['Dud Data', 52.3283777, 1.6753005, 12, 'some descriptive text']
            <?php 
             //this PHP is a working Javascript array of marker data
             // disabled for testing but seems ok.
             //print $placesOutput;
             ?>
        ];

        function setMarkers(map) {
            // Adds markers to the map.

            for (var i = 0; i < places.length; i++) {
                var business = places[i];

                var marker = new google.maps.Marker({
                    title: business[0],
                    position: {lat: business[1], lng: business[2]},
                    map: map,
                    zIndex: business[3]
                });
                google.maps.event.addListener(places, 'click', function (){
                    infowindow.setContent(business[4]);
                    infowindow.open(map, this);
                })
            }
        }
       **/
    </script>
    <script type="text/javascript" defer async
            src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
    </script>
</head>

<body>
     <div id='map' style='height:500px;width:500px;'></div>
</body>
</html>

到目前为止我已经尝试过：

源代码来自 Google 开发者文档here 和各种相关的 Google 页面。多个标记info window 的代码来自另一个站点。

我已阅读 this question、this question 和 this question - 第三个问题使我重新排序我的代码，以便在函数建立之后引用 API。 p>

我在浏览器 (Firefox/Chrome) 的控制台中有 NO 错误；我似乎没有任何 javascript 错误。
我目前正在测试没有 PHP 数据，因此问题 2 不适用于此处。
我的 API 密钥工作正常。
我尝试重新排序 Javascript 代码以及将代码放在 DIV 元素之前/之后，但没有任何变化。
禁用 places 数组、setMarker 函数和 infoWindow 函数也不会使其工作。
页面上没有运行其他 javascript。

我确定这很简单，但我看不到它......

【问题讨论】：

您的initMap 函数很可能在#map 元素存在之前被调用。如果您将<script> 移动到文档底部，就在</body> 之前，它应该可以工作。示例jsfiddle.net/3rror404/3esc5dbc/1
这真是令人困惑。我检查了我的 CSP 并没有阻止对地图 API 的访问，任何想法为什么页面 div 内容只是一个空白框？
我确实将元素移到了页面底部，但这似乎并没有解决问题。
“elments”是指加载谷歌地图的脚本吗？
您还应该在 initmap fn 中放置一个断点以确保它确实被调用，检查开发工具中的网络选项卡以确保您的请求没有失败，检查控制台是否有错误等. 基本调试的东西。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

我发现了问题。

不出所料，这非常愚蠢。

页面上有另一个不相关的元素也有id='map' 引用。将地图 javascript 中的 id 引用更改为 unqiue id 完全修复了显示问题。

【讨论】：