9

I'm using the autocompleteservice from google maps api V3 to make a custom autocomplete input. I basically call this function to retrieve cities suggestions.

function getPlaces(st){
    gService.getQueryPredictions({input:st,types:['geocode']},function(predictions,status)      {
        if(status != google.maps.places.PlacesServiceStatus.OK) return false;
        for(var i = 0, prediction; prediction = predictions[i]; i++){
            console.log(prediction);
        }
        return predictions;
    });
}

This is working great, but i want to get the zip code associated to cities. Like the V2 api did, see this example.

I tried to change the types option to cities, but the result is the same. Any idea how to do that?

Niveditha Karmegam
  • 742
  • 11
  • 28
loicb
  • 587
  • 2
  • 6
  • 24
  • have a look at this answer, it was really helpful: http://stackoverflow.com/questions/14414445/google-maps-api-v3-cant-gecode-autocompleteservice-predictions – zanona Oct 17 '13 at 14:11

3 Answers3

1

In the new API the AutocompleteService only searches for guessed strings that match the text you've typed so far. To get to the actual Place object that contains address and other data, you need to use the Autocomplete object that is created when you attach the autocomplete() function to a textbox. See docs here: https://developers.google.com/maps/documentation/javascript/places#getting_place_information

Alexandra
  • 4,723
  • 3
  • 26
  • 32
  • but in this case, how to use the `Autocomplete` class with a defined input string programatically? if I don't want to have a text field and already know the string I want to use as input? – zanona Oct 17 '13 at 13:43
  • 1
    @zanona You can't use Autocomplete class because that's a UI class (it attaches itself to a textbox). For your purpose you need to use the AutocompleteService class instead: https://developers.google.com/maps/documentation/javascript/reference#AutocompleteService – Alexandra Oct 18 '13 at 16:05
  • `autocompleteService` doesn't provide `getDetails` method as `Autocomplete` – Arseniy-II Feb 04 '19 at 07:32
  • I haven't looked at Google's geo autocomplete API in over 6 years, @Arseniy-II. Glad you posted an updated answer! – Alexandra Mar 02 '19 at 02:22
1

If the returned prediction is a place, then it will have a place_id property. You need to pass that id to the getDetails method of the PlacesService class and that will return you postal information. It's a bit round about way to get the postal code, but it's the only solution I've found that works with the AutocompleteService

Documentation for the PlacesService class

kcarra
  • 209
  • 2
  • 7
0

Check this code snippet:

    var geocoder;
var map;
function initialize() {  
  var input = document.getElementById('id_address');
  var options = {
    types: ['address'],
    componentRestrictions: {
      country: 'in'
    }
  };

  autocomplete = new google.maps.places.Autocomplete(input, options);

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    
    for (var i = 0; i < place.address_components.length; i++) {
      for (var j = 0; j < place.address_components[i].types.length; j++) {
        if (place.address_components[i].types[j] == "postal_code") {
          document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;

        }
      }
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize)
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDxcRPSsACIjdvMWRcfJBMzp4pKQXPJjj0&libraries=places"></script>
<input id="id_address" type="text" value="" />
<div id="postal_code"></div>
Varun Sharma
  • 4,632
  • 13
  • 49
  • 103