I'm using the autopleteservice from google maps api V3 to make a custom autoplete 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?

I'm using the autopleteservice from google maps api V3 to make a custom autoplete 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?

• javascript
• google-maps-api-3

• have a look at this answer, it was really helpful: stackoverflow./questions/14414445/… – zanona Commented Oct 17, 2013 at 14:11

3 Answers 3

In the new API the AutopleteService 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 Autoplete object that is created when you attach the autoplete() function to a textbox. See docs here: https://developers.google./maps/documentation/javascript/places#getting_place_information

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 AutopleteService

Documentation for the PlacesService class

Check this code snippet:

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

  autoplete = new google.maps.places.Autoplete(input, options);

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

        }
      }
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize)

<script type="text/javascript" src="http://maps.googleapis./maps/api/js?key=AIzaSyDxcRPSsACIjdvMWRcfJBMzp4pKQXPJjj0&libraries=places"></script>
<input id="id_address" type="text" value="" />
<div id="postal_code"></div>