You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
There are a couple of ways that you can use the library and both are explained below:
1. As a JS module
You can import the libarary using theimport keyword. You will need to make sure that you are using something like Weback to transpile your code, because at this time, browsers do not support import modules.
importAddressAutocompletefrom'google-address-autocomplete';// Use a callback here to get the resultsnewAddressAutocomplete('#my-input-id-or-class-name',results=>{constaddressObject=results;// This is what the results object looks likeresults={cityName:"Birmingham",country:"United States",countryAbbr:"US",formattedAddress:"123 Shades Crest Rd, Birmingham, AL 35226, USA",state:"Alabama",stateAbbr:"AL",streetName:"Shades Crest Road",streetNumber:"123",zipCode:"35226",};});
And include your final bundle in your HTML like this.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><labelfor="my-input-id-or-class-name">Enter the first address here</label><!-- Here we are giving our input and ID so we can tell autocomplete where to work --><inputtype="text"id="my-input-id-or-class-name"name="my-input-id-or-class-name"/><!-- This is the one external dependency that is needed in order to make this package work --><scriptsrc="https://maps.googleapis.com/maps/api/js?key=YOU_GOOGLE_API_KEY_GOES_HERE&libraries=places"></script><scriptsrc="js/your-compiled-script-here.js"></script></body></html>
2. Include the compiled script in your HTML
If you are not using something like Webpack to bundle your assets and you just want to use the library on the page, you can use this process.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><labelfor="my-input-id-or-class-name">Enter the first address here</label><!-- Here we are giving our input and ID so we can tell autocomplete where to work --><inputtype="text"id="my-input-id-or-class-name"name="my-input-id-or-class-name"/><!-- This is the one external dependency that is needed in order to make this package work --><scriptsrc="https://maps.googleapis.com/maps/api/js?key=YOU_GOOGLE_API_KEY_GOES_HERE&libraries=places"></script><!-- You can either point to the node_modules folder or you can copy the file from the node_modules and place it in your public directory and use it there. Here, we are pointing to the node_modules folder. --><scriptsrc="../node_modules/google-address-autocomplete/dist/google-address-autocomplete.min.js"></script><script>// Now you can use the library as you normally wouldnewAddressAutocomplete('#address1',function(result){console.log(result);});newAddressAutocomplete('#address2',function(result){console.log(result);});</script></body></html>
NOTE: You can use it for multiple fields on a page like so:
