在网站中实施 Google Places Api

Question

我是第一次在电子商务网站中实现谷歌空间自动完成搜索。我正在通过http://www.aspsnippets.com/Articles/Google-Places-AutoComplete-example-without-using-Maps.aspx 实施帮助。

当我在 HTML 页面中使用时，它工作正常。

    var geocoder;
var map;
function initialize() {  
  var input = document.getElementById('id_address');
  var options = {
    types: ['address'],
    componentRestrictions: {
      country: 'in'
    }
  };

  autocomplete = new google.maps.places.Autocomplete(input, options);

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    
    for (var i = 0; i < place.address_components.length; i++) {
      for (var j = 0; j < place.address_components[i].types.length; j++) {
        if (place.address_components[i].types[j] == "postal_code") {
          document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
          
alert(place.address_components[i].long_name);
          
        }
      }
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize);

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<input id="id_address" type="text" value="" />
<div id="postal_code"></div>

但是当我在我的项目中实现相同的东西时，它会在浏览器的控制台中显示一些错误。

屏幕截图：

在浏览器中显示一些图标并禁用搜索。 我不明白是什么问题。因为在 HTML 文件或 jsfiddle 中工作正常。但不能在网站上工作。

Answer 1

从您得到的错误来看，您应该：

1. 从<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> 中删除sensor=false&。这样做不会妨碍您的脚本工作，但 Google 建议您删除它。
2. 如果您有 API 密钥，请使用 key= 参数向您的 url 添加一个 API 密钥，如果没有，请创建并添加一个。这可能是你的主要问题。您可以点击页面右上角的“GET A KEY”链接here。

此外，您可能会发现error documentation 在调试这些消息时很有帮助。