How to add an autocomplete address field to your forms in Shopify

Zworthkey
Shopify Partner
5581 642 1574

Any one Know How?

Here is the Solution.

<div id="main" role="main">
      
      <script src="//maps.googleapis.com/maps/api/js?key=YOUR API KEY&amp;libraries=places&amp;callback=PlaceAutocompleteSearch" async="" defer=""></script>
<script>
  function PlaceAutocompleteSearch() {
    var input = document.getElementById('search-address');
    var autocomplete = new google.maps.places.Autocomplete(input);
  }
</script>
<div class="rte">
  
  <h2>Place Autocomplete Search</h2>
  <input type="text" id="search-address" value="" class="pac-target-input" placeholder="Enter a location" autocomplete="off">
  
</div>
<style>
  #search-address{
    width:100%;
    height: 30px;
  }
</style>
    </div>
Reply 1 (1)

Zworthkey
Shopify Partner
5581 642 1574

<div id="main" role="main">

<script src="//maps.googleapis.com/maps/api/js?key=YOUR API KEY&amp;libraries=places&amp;callback=PlaceAutocompleteSearch" async="" defer=""></script>
<script>
function PlaceAutocompleteSearch() {
var input = document.getElementById('search-address');
var autocomplete = new google.maps.places.Autocomplete(input);
}
</script>
<div class="rte">

<h2>Place Autocomplete Search</h2>
<input type="text" id="search-address" value="" class="pac-target-input" placeholder="Enter a location" autocomplete="off">

</div>

</div>