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

let bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(32.3875, -125.0557));
bounds.extend(new google.maps.LatLng(48.914, -103.962));

const ac = new google.maps.places.Autocomplete(document.getElementById('location'), {
  types: ['geocode'],
  componentRestrictions: {
    country: ['us', 'mx']
  }
});

google.maps.event.addListener(ac, 'place_changed', function() {
  if (!self.autocomplete.getPlace().formatted_address) {
    return false;
  }
  const loc = self.autocomplete.getPlace().formatted_address;
  self.location_search_field = loc;
  PubSub.publish('RUN_SEARCH')
});