google-maps-autocomplete-input

_custom UI for Google Maps Places Autocomplete

Usage no npm install needed!

<script type="module">
  import googleMapsAutocompleteInput from 'https://cdn.skypack.dev/google-maps-autocomplete-input';
</script>

README

npm version Bundlephobia code style: prettier

Google Maps Autocomplete Input

Custom UI for Google Maps Places Autocomplete.

Browser document object is requered.

Sample

Installation

Node

npm i -s google-maps-autocomplete-input

Script tag

<script src="/path/to/google-maps-autocomplete-input.js"></script>

Usage

// _for NODE.js
import placesAutocomplete from 'google-maps-autocomplete-input';
// _init module, you need API_TOKEN from google console
const paInput = new placesAutocomplete('<API_TOKEN>');
const placeConfig = {
  // _specify country for autocomplete
  countryCode: 'us',
  // _type of autocomplition: (cities), (regions): https://developers.google.com/maps/documentation/javascript/places-autocomplete
  autocompleteType: ['(cities)'],
  // _use only place name
  onlyName: true,
  // _inputs list with additional filter places like city, state, country
  filterInputs: []
} 
// _after dropdown selected callback
/* place: {id, name, description, structured_formatting, terms} */
const afterPlaceSelected = place => {
  console.log(place);
}
const placeInput = document.getElementById('dcity');
// bind input with autocompletetion to input
paInput.bindInput({
    input: placeInput, 
    config: placeConfig,
    afterSelected: afterPlaceSelected
});

License

Google Maps Autocomplete Input is MIT licensed.