How to Autocomplete addresses for WooCommerce

Google Address Autocomplete For WooCommerce empowers the users to experience in autofill billing and / or shipping address fields. It is easy and fast, helping to get results for a specific country; therefore, it saves time for the checkout process.

Add Autocomplete Address Woocommerce

This code is placed in “Code Snippets” An error occurred

Follow the tutorial below
https://mogul.nz/2018/08/how-to-autocomplete-addresses-for-woocommerce/

    if(function_exists('is_checkout') && is_checkout()){
        $api_key = acf_get_setting('google_api_key');
        $url = "https://maps.googleapis.com/maps/api/js?key=$**My_key**&libraries=places";
        wp_enqueue_script( 'google-maps-js', $url );            
    }

} 

script

<script>

//Attach the autocomplete to the DOM element
var billing_autocomplete = new google.maps.places.Autocomplete($('#billing_address_1')[0], {
    bounds: auckland_bounds, //restrict the search area
    strictBounds: true,        
});

//Define what information we want back from the API
billing_autocomplete.setFields(['address_components']);

//Define a handler which fires when an address is chosen from the autocomplete
billing_autocomplete.addListener('place_changed', function() {

  var place = billing_autocomplete.getPlace();

  if (place.address_components) {

      //console.log(place.address_components)

      var street_number = place.address_components[0].short_name;
      var street_name = place.address_components[1].short_name
      var suburb = place.address_components[2].short_name;
      var city = place.address_components[3].short_name;
      var postcode = place.address_components[6].short_name;

      $('#billing_address_1').val(street_number + ' ' + street_name);
      $('#billing_address_2').val(suburb);
      $('#billing_city').val(city);
      $('#billing_postcode').val(postcode);

  }

});

</srcipt>