google-address-autocomplete
Advanced tools
This is a package that gives an input address autocomplete by using Google's lookup.
A library that attaches Google address autocomplete to a text input.
npm install google-address-autocomplete
There are a couple of ways that you can use the library and both are explained below:
You can import the library using the import 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.
import AddressAutocomplete from 'google-address-autocomplete';
// Use a callback here to get the results
new AddressAutocomplete('#my-input-id-or-class-name', (results) => {
const addressObject = results;
// This is what the results object looks like
results = {
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",
coordinates: {
lat: -123.45678
lng: 98.76543
}
};
});
NOTE: There is an optional parameter for adding custom options to the API call. So, it look like this:
const options = {
componentRestrictions: {country: "us"}
};
new AddressAutocomplete('#my-input-id-or-class-name', options, results => {...});
You can use custom options for example, to restrict the search to a specific area (country, region, city, etc.).
NOTE: There is an optional second parameter in the callback function, that will dump out the raw response from Google. So, it look like this:
new AddressAutocomplete('#my-input-id-or-class-name', (results, rawResults) => {...});
You can use a callback for both of them to get the results of each.
Big thanks to @Braunson for his help with this!
And include your final bundle in your HTML like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label for="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 -->
<input type="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 -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOU_GOOGLE_API_KEY_GOES_HERE&libraries=places"></script>
<script src="js/your-compiled-script-here.js"></script>
</body>
</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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label for="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 -->
<input type="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 -->
<script src="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.
-->
<script src="../node_modules/google-address-autocomplete/dist/google-address-autocomplete.min.js"></script>
<script>
// Now you can use the library as you normally would
new AddressAutocomplete('#address1', function (result) {
console.log(result);
});
new AddressAutocomplete('#address2', function (result) {
console.log(result);
});
</script>
</body>
</html>
NOTE: You can use it for multiple fields on a page like so:
new AddressAutocomplete('.shipping-address', result => console.log(result));
new AddressAutocomplete('.billing-address', result => console.log(result));
Just bind it to all of the form elements that need autocomplete.
If you find an issue, submit it and let's fix it!
FAQs
This is a package that gives an input address autocomplete by using Google's lookup.
The npm package google-address-autocomplete receives a total of 196 weekly downloads. As such, google-address-autocomplete popularity was classified as not popular.
We found that google-address-autocomplete demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.