Google地图自动完成无法正常使用

Question

我在这里遇到一个非常特殊的问题。我可以在JsFiddle上运行代码，但无法在Codepen上运行确切的代码。 我也无法在我的本地运行它。 请在链接下方 -

CodePen Link

JsFiddle Link

使用JavaScript -

var placeSearch, autocomplete;


function initAutocomplete() {
  autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
      {types: ['geocode']});

  autocomplete.addListener('place_changed', fillInAddress);
}

function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

Answer 1

如果打开浏览器控制台，您会注意到codepen站点上发生以下错误：

RefererNotAllowedMapError exception

Accordintg to Error Messages page：

  

加载Google Maps JavaScript API的当前网址尚未包含   添加到允许的引荐列表中。请检查推荐人   在Google API控制台上设置API密钥。

     

见API keys in the Google API Console。有关详细信息，请参阅Best practices for securely using API keys。

解决问题：

• 转到Google API Console
• 在Credentials菜单下选择相应的API密钥
HTTP引用列表中的
• 添加http://s.codepen.io/*