谷歌地圖自動完成不工作

我在這裏遇到一個非常奇怪的問題。我能夠在JsFiddle上運行代碼，但無法在Codepen上運行確切的代碼。我是不是能夠在我的本地運行它。請鰭鏈接 - 以下谷歌地圖自動完成不工作

的JavaScript Used-

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()); 
    }); 
    } 
}

來源

2016-12-03 theLearner

你的鑰匙未經授權，CodePen：'谷歌地圖API的錯誤：RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map - 錯誤您的網站的URL將被授權：http：// s.codepen.io/boomerang/ee5c28f48760ef39f4ce481d5c7ac3ff1480776136374/index.html' – geocodezip

如果打開瀏覽器控制檯，你會發現在codepen現場出現以下錯誤：

RefererNotAllowedMapError exception

Accordintg到Error Messages page：

The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console.

See API keys in the Google API Console . For more information, see Best practices for securely using API keys .

要解決此問題：

去Google API Console
下Credentials菜單中選擇選擇合適的API密鑰
在HTTP參照網址添加名單http://s.codepen.io/*

來源

2016-12-03 15:12:23

感謝@Vadim Gremyachev這工作.. :) – theLearner

谷歌地圖自動完成不工作

回答

相關問題