Question

我有一个页面显示Google Map输出，页面上设置了一组（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的引用功能已建立。

我在浏览器的控制台上有 NO 错误（Firefox / Chrome）;我似乎没有任何javascript错误。

我目前正在测试没有 PHP数据，所以问题2不适用于此。

我的API密钥正常工作。

我尝试重新排序Javascript代码以及在DIV元素之前/之后放置代码，但没有更改。

禁用places数组，setMarker函数和infoWindow函数也无法使其正常工作。

页面上没有其他javascript运行。

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

Answer 1

我发现了这个问题。

正如所料，这是非常愚蠢的。

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

Google Maps API空白输出

1 个答案: