Google 地图自动填充字段未列出地址答案

【问题标题】：Google Maps autocomplete field doesn't list adressesGoogle 地图自动填充字段未列出地址
【发布时间】：2016-11-08 16:00:12
【问题描述】：

我在 Google api 控制台上创建了一个项目并获得了一个浏览器密钥，以便显示带有 Google Map 自动完成功能的文本框。尽管我在浏览器控制台中没有收到任何错误，但自动完成功能不起作用。这是我的html

<html>
<head>
    <meta charset = "utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>

<body onload = "initialize();">
<form method = "post">
    <input type = "text" id = "autocomplete" placeholder = "Η Διευθυνσή σας"/>
</form>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmm_XsU6QttZNhw1RfxRHTpavpbN33jX0&libraries=places,geometry" async defer></script>
<script type = "text/javascript">
        var autocomplete;
        function initialize() {
          autocomplete = new google.maps.places.Autocomplete(
              /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
              { types: ['geocode'] });

        }
    </script>
</body>

这是我的测试页面：http://www.lefko-cafe.gr/content/addrress_finder.php

奇怪的是，完全相同的 html 在另一个域中工作（除了密钥）：http://www.laoskaikalamaki.gr/content/addrress_finder.php

【问题讨论】：

标签： google-maps autocomplete google-api

【解决方案1】：

如果要使用Places Service，则更改Maps API Standard Plan 需要启用Google Places API Web Service in the developer console

任何其他服务也是如此，如果您想要我们Directions，您需要启用Google Maps Directions API，如果您想要使用Geocoding，您需要启用Google Maps Geocoding API。

最近发生了变化，所以不必抱歉。

【讨论】：

【解决方案2】：

你的例子都不适合我。 onload 事件和脚本加载完成是两个不同的异步事件，它们可能在不同的服务器/浏览器位置以不同的顺序触发。我收到一个 JavaScript 错误 Uncaught TypeError: Cannot read property 'innerHTML' of null 您的 API 包含 async defer，但没有 &callback=initialize 参数。

代码 sn-p：

<body> <!-- remove onload = "initialize();" -->
<form method = "post">
    <input type = "text" id = "autocomplete" placeholder = "Η Διευθυνσή σας"/>
</form>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmm_XsU6QttZNhw1RfxRHTpavpbN33jX0&libraries=places,geometry&callback=initialize" async defer></script>

<form method="post">
  <input type="text" id="autocomplete" placeholder="Η Διευθυνσή σας" />
</form>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&callback=initialize" async defer></script>
<script type="text/javascript">
  var autocomplete;

  function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */
      (document.getElementById('autocomplete')), {
        types: ['geocode']
      });
  }
</script>

【讨论】：

那我做错了什么？我认为这与 api 密钥有关，但我无法弄清楚
您的密钥是否启用了场所 API 和有问题的 URL？
哦...这就是问题所在！对此真的很抱歉。谢谢！

【解决方案3】：

如果您的域在 2016 年 6 月 22 日之后，则需要 api-key。如果您只想通过 javascript 使用 google 自动完成功能，则需要启用以下 api

谷歌地图 JavaScript API
Google Places API 网络服务

【讨论】：