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 · Answer 1 · 2012-10-25T11:00:27.387

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 '12 at 11:00

answered Oct 25 '12 at 09:27

Max Małecki

1,700
2
13
18

sorry to be so super dumb but, will that be under initialize() ? – Keval Domadia Oct 25 '12 at 09:28
I need to check the goolge autocompleate syntax. – Max Małecki Oct 25 '12 at 09:33
1

there you go! Just replace you JS – Max Małecki Oct 25 '12 at 09:48
replace my JS with? sorry, I know, I am testing your patience but, which JS is it? – Keval Domadia Oct 25 '12 at 10:14
I replaced it with https://maps.google.com/maps/api/js?sensor=true&libraries=places&v=3.exp and it console tells me : Uncaught Error: Property input is not specified. – Keval Domadia Oct 25 '12 at 10:16
try now i moved the `input` var above `initialize()` to make it global. – Max Małecki Oct 25 '12 at 10:19
Console tells me : Uncaught TypeError: Cannot read property 'input' of null – Keval Domadia Oct 25 '12 at 10:20
so replace the `input` var with the: `document.getElementById('searchTextField')` in the initialize – Max Małecki Oct 25 '12 at 10:25
Sorry mate , it is not working and I have posted it with 'every line' because, I am not so good with JS and stuff... I tried your suggestion and it has now completely stopped working :( – Keval Domadia Oct 25 '12 at 10:28
Thanks for the Final update part. It gave me alerts with (cities) and then, undefined, what I want is as mentioned in the question... administrative_area_level_1 and 2... Here , link to image (if not visible in quesiton) : http://i.stack.imgur.com/araD3.jpg I need long and shortnames for that. – Keval Domadia Oct 25 '12 at 11:46

score 1 · Accepted Answer · answered Nov 09 '12 at 10:28

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 09 '12 at 10:28

Keval Domadia

4,768
1
37
64

score 0 · Answer 3 · answered Oct 25 '12 at 10:17

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 '12 at 10:17

Loken Makwana

3,788
2
21
14

Dang! How do I put it? in my initialize() ? – Keval Domadia Oct 25 '12 at 10:17
I have partially copied my code from that reference link only. If you see closely, I have not even removed the default `id` :-) – Keval Domadia Oct 25 '12 at 10:19

How to decode Google Places JSON using Javascript?

3 Answers3

Final Update