Google 放置 API 错误：Edge 和 Firefox 未定义“google”答案

【问题标题】：Google places API error: 'google' is not defined with Edge & FirefoxGoogle 放置 API 错误：Edge 和 Firefox 未定义“google”
【发布时间】：2019-01-31 17:45:44
【问题描述】：

所以有两个输入，当您开始输入地址时，它会给您一个结果列表。它适用于 chrome，但由于某种原因，我无法弄清楚为什么它会在 Edge 中出现此错误：

Edge 版本：Microsoft Edge 42.17134.1.0

Firefox 版本：版本 65.0（64 位）

这里是jsfiddle

  <html lang="en">

    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous" />

      <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    </head>

    <body>
      <form id="distance_form">
        <div class="form-group"><label>Origin: </label> <input class="form-control" id="from_places" placeholder="Enter a location" />
          <input id="origin" name="origin" required="" type="hidden" />
        </div>

        <div class="form-group"><label>Destination: </label> <input class="form-control" id="to_places" placeholder="Enter a location" />
          <input id="destination" name="destination" required="" type="hidden" />
        </div>

      </form>
      <script>
      $(function () {
          // add input listeners
          google.maps.event.addDomListener(window, "load", function () {
            var from_places = new google.maps.places.Autocomplete(
              document.getElementById("from_places")
            );
            var to_places = new google.maps.places.Autocomplete(
              document.getElementById("to_places")
            );
          });
        });
      </script>
      


      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCteSKX5TJVTK5GAdDktqmE2ebuDSPTU-4&libraries=places&language=en"></script>
    </body>

    </html>

【问题讨论】：

您正在异步加载 Google Maps Javascript API v3 脚本（使用 async defer）。要么同步加载它（删除那些，并将它移到依赖它的代码之上），要么使用异步回调（如谷歌推荐的那样（以及下面的答案）。

标签： jquery api firefox google-api microsoft-edge

【解决方案1】：

尝试如下修改你的代码：

当 Google Maps API 准备就绪时，它将使用回调参数调用指定的函数（initMap 函数）。

<script>
    function initMap() {
        // add input listeners
        var from_places = new google.maps.places.Autocomplete(
            document.getElementById("from_places")
        );
        var to_places = new google.maps.places.Autocomplete(
            document.getElementById("to_places")
        );
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCteSKX5TJVTK5GAdDktqmE2ebuDSPTU-4&libraries=places&language=en&callback=initMap"></script>

输出如下（使用Edge浏览器42.17134.1.0版本）：

有关使用 Google Maps API 的更多详细信息，您可以查看 this tutorial 和 Google Maps API Place Autocomplete。

【讨论】：