Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
436 views
in Technique[技术] by (71.8m points)

javascript - Google places API key error

I am developing a project and I have to use google places api for web. I am using google api for location name drop down menu. When I fill out location name, I am getting back this response. I have generated api key and embedded it my code but this doesn't seem to be working. Any suggestion?

/**/xdc._62n6tn && xdc._62n6tn( [3,null,null,"This service requires an >API key. For more information on authentication and Google Maps Javascript API services please see: >https://developers.google.com /maps/documentation/javascript/get-api-key"] )

edit: Ok here's the code

<!DOCTYPE html>
<html>
  <head>
  <title>Retrieving Autocomplete Predictions</title>
 <style>
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
  #right-panel {
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
  }

  #right-panel select, #right-panel input {
    font-size: 15px;
  }

  #right-panel select {
    width: 100%;
  }

  #right-panel i {
    font-size: 12px;
  }
</style>
 </head>
 <body>
   <div id="right-panel">
    <p>Query suggestions for 'Taxi Services near NewY':</p>
    <ul id="results"></ul>
  </div>
  <script>

  function initService() {
    var displaySuggestions = function(predictions, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }

      predictions.forEach(function(prediction) {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(prediction.description));
        document.getElementById('results').appendChild(li);
      });
    };

    var service = new google.maps.places.AutocompleteService();
    service.getQueryPredictions({ input: 'Taxi Services near NewY' }, displaySuggestions);
  }
</script>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIza---------------------&</script>

and here's the google api settings

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I think you are missing steps . 1. Go to Google Developers Console. 2. Enable Google Maps Javascript API. 3. Then Generate API key . 4. Then put that API key in the bottom of your code in this section.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_JAVASCRIPT_API_KEY&libraries=places&callback=initService"
    async defer></script>

This will 100% work, if follow the steps carefully.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...