Google API for address autocompletion not working

Question

I was trying to implement an Address auto-complete functionality using Google API on one of my text field in my Siebel application. I keep getting the error "google not defined".I am using jquery The following is my code:

     PhoneChangePR.prototype.BindData = function(a) {
                SiebelAppFacade.PhoneChangePR.superclass.BindData.call(this, a);
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
            console.log("Google maps successfully added");
            });
                  $.getScript("http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU", function() {
            console.log("Second script loaded successfully");
            });


             var autocomplete = new google.maps.places.Autocomplete($("input[aria-labelledby=NewAddressLine1_Label]")[0], {});

                google.maps.event.addListener(autocomplete, 'place_changed', function() {
                    var place = autocomplete.getPlace();
                    console.log(place.address_components);
    });

Kindly help.Thanks in advance.

Answer 1

You're loading the google maps API asynchronously, but you're trying to call the google.maps.places.Autocomplete constructor before the API has been loaded in.

Move all the code that relies on the API being loaded into the success callback.

PhoneChangePR.prototype.BindData = function(a) {
    SiebelAppFacade.PhoneChangePR.superclass.BindData.call(this, a);
    $.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
        console.log("jQuery successfully loaded");
    });

    $.getScript("http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU", function() {
        console.log("Google maps successfully added");
        var autocomplete = new google.maps.places.Autocomplete($("input[aria-labelledby=NewAddressLine1_Label]")[0], {});

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            console.log(place.address_components);
        });
    });
});

Instead of relying on jQuery's success callback, you might want to use Google's own callback when the maps JS has loaded successfully, by adding the callback URL parameter onto the request to load the Maps API. Try this instead:

PhoneChangePR.prototype.BindData = function(a) {
    SiebelAppFacade.PhoneChangePR.superclass.BindData.call(this, a);
    $.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
        console.log("jQuery successfully loaded");
    });

    $.getScript("http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU&callback=setupAutocomplete");
});

function setupAutocomplete() {
    console.log("Google maps successfully added");
    var autocomplete = new google.maps.places.Autocomplete($("input[aria-labelledby=NewAddressLine1_Label]")[0], {});

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        console.log(place.address_components);
    });
}