CODEWITHSUNDEEP
javascriptgoogle-maps
theLearner
theLearner

Reputation: 361

Google Map Auto-complete not working

I'm facing a really peculiar issue here. I'm able to run a code on JsFiddle, but not able to run the exact code on Codepen. Neither am i able to run it on my local. Please fin below the links-

CodePen Link

JsFiddle Link

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

Upvotes: 0

Views: 850

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59378

If open the browser console you will notice the following error occurs on codepen site:

RefererNotAllowedMapError exception

Accordintg to 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.

To fix the issue:

  • go to Google API Console
  • under Credentials menu select select appropriate API key
  • in the list of HTTP referers add http://s.codepen.io/*

enter image description here

Upvotes: 2

Related Questions