Google Map Автозаполнение не работает

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 в 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 Referers добавить http://s.codepen.io/*