How to decode Google Places JSON using Javascript?

Question

I have a script here:

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script>
      function initialize() {
        var input = document.getElementById('searchTextField');
        var options = {
            types: ['(cities)'],
            componentRestrictions: {country: 'us'}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options);
}
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div>
      <input id="searchTextField" type="text" size="50">
    </div>
  </body>
</html>

All I want to do is, get the JSON output from the autocomplete and extract long_name , short_name of administrative_area_level_1 and administrative_area_level_2 see the image below.

Screenshot of what I want

Max Małecki · Accepted Answer · 2012-10-25 11:00:27Z

1

Use the http://api.jquery.com/jQuery.parseJSON/ Like this:

var results = jQuery.parseJSON(google_json);

Then:

alert(results[0].types[0]);
alert(results[0].types[1]);

So with the google-places autocompleate you need to do this like in this link: https://developers.google.com/maps/documentation/javascript/places?hl=pl#places_autocomplete

var input = document.getElementById('searchTextField'); // input must be global
function initialize() {

    var options = {
        types: ['(cities)'],
        componentRestrictions: {country: 'us'}
    };

    //var autocomplete = new google.maps.places.Autocomplete(input, options);
    var service = new google.maps.places.AutocompleteService();
    service.getQueryPredictions(input, callback);



}

function callback(predictions, status) {
    for (var i = 0, prediction; prediction = predictions[i]; i++) {
        alert(prediction.types[0]);
        alert(prediction.types[1]);
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

Here you got live example: https://google-developers.appspot.com/maps/documentation/javascript/examples/places-queryprediction?hl=pl

Final Update

Use this script:

<script>

    function initialize() {
        var input = document.getElementById('searchTextField');
        var options = {
    types: ['(cities)'],
    componentRestrictions: {country: 'us'}
    };

    var autocomplete = new google.maps.places.Autocomplete(input, options);
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
       alert(this.types[0]);
       alert(this.types[1]);          
    });




    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

edited Oct 25, 2012 at 11:00

answered Oct 25, 2012 at 9:27

Max Małecki

1,7022 gold badges13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Keval Domadia Over a year ago

sorry to be so super dumb but, will that be under initialize() ?

Max Małecki Over a year ago

I need to check the goolge autocompleate syntax.

Max Małecki Over a year ago

there you go! Just replace you JS

Keval Domadia Over a year ago

replace my JS with? sorry, I know, I am testing your patience but, which JS is it?

Keval Domadia Over a year ago

I replaced it with maps.google.com/maps/api/… and it console tells me : Uncaught Error: Property input is not specified.

|

Keval Domadia · Accepted Answer · 2012-11-09 10:28:31Z

1

It was simple but, difficult to find:

Finally implemented GeoComplete JS using :

http://ubilabs.github.com/geocomplete/

Website is enough documented to assist with implementation.

answered Nov 9, 2012 at 10:28

Keval Domadia

4,6931 gold badge39 silver badges65 bronze badges

Comments

user420964 · Accepted Answer · 2012-10-25 10:17:03Z

0

If you want to process results after selection of place you have to bind event like below

google.maps.event.addListener(autocomplete, 'place_changed', your_function);

Code on following page will be very helpful to you https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete

answered Oct 25, 2012 at 10:17

user420964

2 Comments

Keval Domadia Over a year ago

Dang! How do I put it? in my initialize() ?

Keval Domadia Over a year ago

I have partially copied my code from that reference link only. If you see closely, I have not even removed the default id :-)

Collectives™ on Stack Overflow

How to decode Google Places JSON using Javascript?

3 Answers 3

Final Update

10 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Final Update

10 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related