Pulling more information from Google Places API call

Question

This is my working code: http://jsfiddle.net/spadez/5ntLetey/1/

It works perfectly but I'm trying to pull the remaining information into the fields. This is the code I had previously for the lat and long that I found online:

lat.val(results[0].geometry.location.lat());
lng.val(results[0].geometry.location.lng());

How can I pull the remaining information in? This is one example of what I tried and didn't work:

country_short.val(results[0].address_components.country());

Here is the API documentation, what am I doing wrong?

score 1 · Accepted Answer · answered Sep 04 '14 at 11:24

1

You're not doing anything particularly wrong, unfortunately the returned address components can vastly differ. For example if you were to geocode a coordinate set which might be in the middle of an ocean, you;'re not going to get many address components and perhaps nothing at all, whereas in the middle of somewhere like New York City there are many components that get returned.

What you need to do is to parse the returned response to find something you want like country and only insert that into your fields if and only if there is an address component that has a type of "country".

So for example to get country short and long you would do something like this:

            // Get Country value.
            var country = getCountry(results[0].address_components)
            $('#country_long').val(country.long);
            $('#country_short').val(country.short);

calling the function which looks something like this:

function getCountry(addressComponents) {
    var returnCountry = {
        'long': 'N/A',
        'short': 'N/A'
    };
    // Loop through all address components and find country if possible.
    $(addressComponents).each(function (componentIndex, component) {
        // loop through all "types" of each component to find if there is a type of "country"
        $(component.types).each(function (indexTypes, type) {
            if (type == 'country') {
                // Then return the long_name and short_name of the component
                returnCountry.long = component.long_name;
                returnCountry.short = component.short_name;
            }
        });
    });
    return returnCountry;
}

Demo: http://jsfiddle.net/5ntLetey/3/

answered Sep 04 '14 at 11:24

Rob Schmuecker

8,934
2
18
34

Thank you very much for the reply, Rob. Looking at an example like this: https://maps.googleapis.com/maps/api/geocode/json?address=atlantic+ocean Is it not possible to just have it so it tries to do it but suppresses any error if the value isn't present, rather than looping through which seems quite intensive – Jimmy Sep 04 '14 at 11:31
1

@Jimmy how do you want to ascertain that it isn't present without looping through? – Rob Schmuecker Sep 04 '14 at 12:11
My javascript isn't very good but could you do something like this? ```if (myVar !== null)``` – Jimmy Sep 04 '14 at 12:36
1

@Jimmy what in relation to my sample code would `myVar` represent? You *have* to loop through all address components to ascertain firstly whether a country is present or not. You can improve the looping by returning `false` when you hit the first country http://stackoverflow.com/questions/1784780/how-to-break-out-of-jquerys-each-loop but if it doesn't find one it will keep looping until it is either finished or does find one. Are you wanting to leave the field blank if it doesn't have a match? In which case just change `'N/A'` to `''` in `getCountry` function. – Rob Schmuecker Sep 04 '14 at 12:40
I'm not sure really, im trying to see how this implementation works: http://ubilabs.github.io/geocomplete/examples/form.html – Jimmy Sep 04 '14 at 12:43
1

Yes that also loops through them all at least once etc. – Rob Schmuecker Sep 04 '14 at 12:54
Right ok. Would you be so kind as to tell me how I populate all my fields using this method? – Jimmy Sep 04 '14 at 13:01
1

Have a look at the "Populate Form Data" section here http://ubilabs.github.io/geocomplete/ basically you make inputs with the `name` of whatever detail you want and it should then populate it for you. Just pass it a jQuery selector of the container where your elements to be populated are found. – Rob Schmuecker Sep 04 '14 at 13:05
Yes I looked at that but I didn't have a lot of confidence in that script because it was throwing out a lot of console errors – Jimmy Sep 04 '14 at 13:08
Yes I see that but not sure really what they are related to TBH. Worth giving a shot though. – Rob Schmuecker Sep 04 '14 at 13:30

Pulling more information from Google Places API call

1 Answers1