JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<script src="//maps.google.com/maps/api/js?v=3&amp;key=AIzaSyDciDh5LCPwyxG8tml6998d80mlukEj8Q4&amp;libraries=drawing,places,geometry"></script>
<input type="text" id="location" name="location" value="" placeholder="Enter a City, State, Zip...">

CSS

input {
  padding: 10px;
  width: 250px;
}

JavaScript

// Set up AutoComplete Widget limiting to US and MX
const ac = new google.maps.places.Autocomplete(document.getElementById('location'), {
  types: ['geocode'],
  componentRestrictions: {
    country: ['us', 'mx']
  }
});

// If a user clicks on a value
google.maps.event.addListener(ac, 'place_changed', function() {
  if (!ac.getPlace().formatted_address) {
    return false;
  }
  document.getElementById('location').value = ac.getPlace().formatted_address;
});