使用 Google Maps API 仅自动完成城市名称列表

Question

我在我的网站上使用以下代码，但它不起作用。问题是什么？我已经包含了用于错误报告的 sn-p。

 <head>
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript">
</script>

    <script type="text/javascript">

        function initialize() {
            var options = {
                types: ['(cities)'],
                componentRestrictions: {country: "us"}
            };

            var input = document.getElementById('searchTextField');
            var autocomplete = new google.maps.places.Autocomplete(input , options);
        }

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

    </script>

</head>
<body>

    <div class = "row">
        <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
    </div>
    </body>

Answer 1

从脚本的 src 属性中删除 sensor=false& 并添加您的 API 密钥：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

以下内容对我有用：

<body>
  <input id="searchTextField" />
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
  <script>
    function initialize() {
      var options = {
        types: ['(cities)'],
        componentRestrictions: {
          country: "us"
        }
      };

      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input, options);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</body>