CODEWITHSUNDEEP
javascriptgoogle-mapsautocompletegoogle-places-api
Armando Silva
Armando Silva

Reputation: 221

AutoComplete Google Javascript

Hi I am having trouble getting the autocomplete to display like here. My code works on submit and displays the map properly, but does not show results of autocomplete. I am wondering what could be the issue.

Here is my HTML

<div id="floating-panel">

  //this is the text field that does not display the autocomplete
  <input id="address" placeholder="Enter Starting Location" type="text"/>

  <input id="submit" type="button" value="Directions">
</div>

<div id="right-panel"></div>
<div id="map"></div>

Here is my Javascript:

 var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'));

Here is my call to autocomplete, the API is enabled, I see calls being made on the data, but no results back:

 https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initMap: {type: external, attributes: {async: true}}

Upvotes: 0

Views: 817

Answers (4)

Julian Sanchez
Julian Sanchez

Reputation: 51

Google maps API has new security changes in its new version, use version 3.0, this works for me:

<script src="https://maps.googleapis.com/maps/api/js?v=3.0&key=YOUR_KEY&libraries=places" async></script>

Upvotes: 2

Armando Silva
Armando Silva

Reputation: 221

My temp solution: I went with the experiential version, https://maps.googleapis.com/maps/api/js?v=3.32 and noticed at the bottom of my HTML there is a tag <div class="pac-container pac-logo hdpi">once you start typing it updates, style this and got fixed. I sent a issue request I am hoping they are going to fix this for the stable version.

Upvotes: 0

user9430727
user9430727

Reputation: 1

https://developers.google.com/maps/documentation/javascript/versions

Specify that you want to use the release version rather than the experimental if you are on the standard plan.

Upvotes: -1

Dan Dubinsky
Dan Dubinsky

Reputation: 1

I'm getting the same thing with very similar code. For me that code was working for months and just today I got a report from a user that the drop down list of locations wasn't showing anymore.

var input = $("input[name='location']");
var formattedAddress = input.next("input[name='formattedLocation']");
var searchBox = new google.maps.places.SearchBox(input[0]);
searchBox.addListener('places_changed', function() {
   var places = searchBox.getPlaces();
   if (places.length == 0) {
      formattedAddress.val('');
      return;
   }

   formattedAddress.val(places[0].formatted_address);
 });

I was thinking that maybe we went over our daily quota, but it doesn't seem so from the Google API console. I don't see any errors in the browser console. If I look in developer tools network tab I can see requests going to https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetQueryPredictions, but the responses seem rather cryptic (ex:/**/xdc._490z0c && xdc._490z0c( [4] ) ) so I can't tell if good data is coming back or not.

I'm wondering if something changed recently on the Google side that I haven't heard about.

Upvotes: 0

Related Questions