If you are using Forms 10 you can easily do this. Create a new form and place an Address Field Widget on to it. Now click on the "CSS and Javascript" tab and place the following code in the JavaScript area:
$.cachedScript = function( url, options ) {
options = $.extend( options || {}, {
dataType: "script",
cache: true,
url: url
});
return $.ajax( options );
};
//https://ubilabs.github.io/geocomplete/
var gUrl = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places";
var gcUrl = "https://ubilabs.github.io/geocomplete/jquery.geocomplete.js";
$.cachedScript(gUrl).done(
function(){
$.cachedScript(gcUrl).done(
function( script, textStatus ) {
//#Field1_DSG0 is the ID for the Street Address input on the Address widget
$("#Field1_DSG0").geocomplete
({ details: "form", detailsAttribute: "class" }).bind(
"geocode:result",
function(event, result){
//https://developers.google.com/maps/documentation/geocoding/intro?csw=1#Types
var ac = result.address_components;
var c = {};
$.each(ac, function(k,v1) {$.each(v1.types, function(k2, v2){c[v2]=v1.short_name});})
var lo = c.locality;
if(lo === undefined)
lo = c.postal_town;
//#Field1_DSG2 is the ID for the City input on the Address widget
$("#Field1_DSG2").val(lo);
var aal = c.administrative_area_level_1;
if(aal === undefined)
aal = c.administrative_area_level_2;
//#Field1_DSG3 is the ID for the State / Province / Region input on the Address widget
$("#Field1_DSG3").val(aal);
var pc = c.postal_code;
if(c.postal_code_suffix != undefined)
pc += "-" + c.postal_code_suffix;
//#Field1_DSG4 is the ID for the Postal / Zip Code input on the Address widget
$("#Field1_DSG4").val(pc);
//#Field1_DSG5 is the ID for the Country input on the Address widget
$("#Field1_DSG5").val(c.country);
//Reformat Street Address to only have the address in it
var addr = $("#Field1_DSG0").val().split(",");
$("#Field1_DSG0").val(addr[0]);
//console.log(result);
});
});
});
Just ensure that "#Field1_DSG0" is the actual ID of the Address input box (Most likely it will be but you may want to view the source of the form to make sure). I have included the links in the code for further reading on the different variables that are returned depending on your country of origin.
UPDATE: Special thanks to Melissa Ward for this - You will need to obtain an API Key from Google and replace the YOUR_API_KEY text in the Google Places Map URL above with the one assigned to you. More information about obtaining a Google Map API can be found at https://developers.google.com/maps/documentation/javascript/get-api-key
Save the form and run it.
This method doesn't require a google key nor any recompiling.
Hope this helps!
Wes
