连接 JS，导致 Google 地图中出现“未捕获的承诺”错误答案

【问题标题】：Concatenated JS, causes "uncaught promise" error in Google Maps连接 JS，导致 Google 地图中出现“未捕获的承诺”错误
【发布时间】：2019-07-29 19:08:48
【问题描述】：

对 JS 不是很精通，也不是很了解 promises 是什么。但我会尽力描述这个问题。

在这个位置页面上，我有一些内联 JS 来输出谷歌地图。非常简单，在 JS 被插件连接之前可以正常工作。

所以奇怪的是当这个错误被抛出时，下面的代码根本不会输出。如果我删除连接它工作正常。这可能是 Wordpress 插件 (WP Rocket) 的问题，而不是特定于 javascript 的问题。我不确定，希望得到任何提示。

代码：

        <script>function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 41.559345, lng: -88.133326 },
                zoom: 16
            });
            //setMarkers(map);
          }

            function setMarkers(map) {

            marker = new google.maps.Marker({
                    position: {lat: 41.559345, lng: -88.133326},
                    map: map,
                     title: "Crest Hill",
                    //icon: customMarker
                });

                marker.addListener('click', function() {
                    map.setZoom(16);
                    map.setCenter(marker.getPosition());
                });
        }

        </script>

错误：

Uncaught (in promise) Mc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new Mc (https://maps.googleapis.com/m…QpokXsxbUPOzocygFOXXXXX&callback=initMap:123:96"}

【问题讨论】：

标签： javascript wordpress

【解决方案1】：

正如您所说，串联正在将您的 initMap 转换为其他不是函数的东西。它似乎作为回调传递给 GoogleMapsAPI，当它尝试执行它时，您会收到错误消息。我会尝试以下方法：

1) 将您的内联脚本提取到它自己的文件中，可能称为mapInitialiser.js。

2) 使用<script src="pathToYourScript/mapInitialiser.js"></script>在您的 HTML 中包含脚本

3) 执行第 2 步意味着您需要考虑以下含义，如下所述：How to make a callback to Google Maps init in separate files of a web app

4) 从串联中排除该文件。您可以在 WP-rocket article 中了解更多信息。

祝你好运！

【讨论】：

抱歉回复晚了，感谢您的回答和建议。我会进一步研究它，暂时我加载了一个不需要回调的静态谷歌地图。

【解决方案2】：

你可以在你的代码下面运行这个命令。

google.maps.event.addDomListener(window, 'load', initMap);

希望对你有帮助。

【讨论】：