JSFiddle - React, Tailwind, and code Playground

by AhmedHR

HTML

<script src="jhttps://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src=""></script>
<div id="locationField">
      <select id="map_country_id">
        <option value="US">United States</option>
        <option value="AU">Australia</option>
      </select>
      <br/>
      <br/>
      <input id="from_place" placeholder="From place" type="text"></input>
      <input id="to_place" placeholder="To place" type="text"></input> 
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places&callback=initAutocomplete" async defer></script>

CSS

#from_place, #to_place {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}

JavaScript

var default_iso_code = 'US';
var autocomplete_from, autocomplete_to;

function initAutocomplete() {
  var options = {
      componentRestrictions: {country: default_iso_code}
  };
  if($("#from_place").length) {
    autocomplete_from = new google.maps.places.Autocomplete($("#from_place")[0], options); 
  }
  if($("#to_place").length) {
    autocomplete_to = new google.maps.places.Autocomplete($("#to_place")[0], options); 
  }

  $(document).on('change','#map_country_id',function() {
    var iso_country = $(this).val();

    //clear from/to
    $("#from_place").val('');
    $("#to_place").val('');

    updateAutocomplete(iso_country);
  });
}

function updateAutocomplete(countryCode) {
  var options = {
      componentRestrictions: {country: countryCode}
  };
  if (autocomplete_from) {
    autocomplete_from.setOptions(options);
  }
  if (autocomplete_to) {
    autocomplete_to.setOptions(options);
  }
}