在网站中实施 Google 个地点 Api

Question

我是第一次在电子商务网站中实现 google 空间自动完成搜索。我正在为 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

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

从 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> 中删除 sensor=false&。拥有它应该不会阻止您的脚本运行，但 Google 建议您将其删除。
如果有 API 键，请使用 key= 参数将 API 键添加到 url，如果没有，请创建并添加一个。这可能是您的主要问题。您可以点击页面右上角的"GET A KEY"linkhere

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

在网站中实施 Google 个地点 Api

Implement Google Places Api in Website

javascript

jquery

google-maps

google-maps-api-3

google-places-api