Google Autocomplete script for Shopify checkout using GTM

Question

I am trying to use a Google autocomplete script in my Shopify checkout. The script works perfectly fine when including in the "additional Javascript" below the analytics tracking code in the store admin. Now I am trying to re-organize things in my store differently and started using GTM. When I place the code in GTM I get the following error:

JavaScript Compiler Error
Error at line 3, character 1: This language feature is only supported for ECMASCRIPT6 mode or better: block-scoped function declaration.

Also the same error but with line 8 instead of 3.

I have created a custom HTML tag with trigger in URL Path containing checkout.

The code is:

<script>
if (window.location.href.indexOf('checkout') > -1) {
  function createCookie(a, b, c) {
    if (c) {
      var d = new Date;
      d.setTime(d.getTime() + c * 60 * 1e3);
      var e = "; expires=" + d.toUTCString()
    } else var e = "";
    document.cookie = a + "=" + b + e + "; path=/"
  }

  function readCookie(a) {
    for (var b = a + "=", c = document.cookie.split(";"), d = 0; d < c.length; d++) {
      for (var e = c[d];
        " " == e.charAt(0);) e = e.substring(1, e.length);
      if (0 == e.indexOf(b)) return e.substring(b.length, e.length)
    }
    return null
  }

  function eraseCookie(a) {
    createCookie(a, "", -1)
  }

  function crtmedir(a) {
    var b = document.createDocumentFragment(),
      c = document.createElement("div");
    for (c.innerHTML = a; c.firstChild;) b.appendChild(c.firstChild);
    return b
  }

  function startTimer(start, duration, display) {
    var diff, minutes, seconds;

    function timer() {
      diff = duration - (((Date.now() - start) / 1000) | 0);
      minutes = (diff / 60) | 0;
      seconds = (diff % 60) | 0;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      display.textContent = minutes + ":" + seconds;
      if (diff <= 0) {
        clearInterval(inti);
        document.getElementById("countdownhere").innerHTML = "Order reservation ended.";
        start = Date.now() + 1000;
      }
    };
    timer();
    var inti = setInterval(timer, 1000);
  }
  var pdm = crtmedir('<div class="countdownholder"><div id="countdownhere" style="display:block;background:#ededed;padding:10px 20px;border:1px solid #e3df74;font-size:14px;color:#2c2c2c;font-weight:bold;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin:20px 0px">Your order is reserved for <span id="time"></span> minutes!</div><div style="display:table;width:100%"><div style="width:33.3%;display:table-cell;float:none;height:100%;vertical-align:middle;text-align:center"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/3/assets/mcafeesecured.png" style="margin:0 auto"></div><div style="width:33.3%;display:table-cell;float:none;height:100%;vertical-align:middle;text-align:center"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/3/assets/paypalverified.png" style="margin:0 auto"></div><div style="width:33.3%;display:table-cell;float:none;height:100%;vertical-align:middle;text-align:center"><img src="https://cdn.shopify.com/s/files/1/1319/2435/t/3/assets/verisign.png" style="margin:0 auto"></div></div></div>');



  window.onload = function() {
    if (window.location.href.indexOf('checkout') > -1 && document.location.href.indexOf('thank_you') === -1) {
      document.getElementsByClassName('main__header')[0].appendChild(pdm);
      var dolzina = 10;
      var ten = 60 * dolzina;
      var starttime = Date.now();
      var xcnt = readCookie('prtcntdwn');
      if (xcnt) {
        if (starttime < xcnt) {
          ten = (xcnt - starttime) / 1000;
        } else {
          eraseCookie('ptcntdwn');
          createCookie('prtcntdwn', Date.now() + (ten * 1000), ten + 1);
        }
      } else {
        createCookie('prtcntdwn', Date.now() + (ten * 1000), ten + 1);
      }
      display = document.querySelector('#time');
      startTimer(starttime, ten, display);
    }

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBGTm0uTrhjWd0HjXn4BxRsQfF2BqT6_zc&libraries=places";
    script.async = "true";
    script.defer = "defer";
    document.body.appendChild(script);

    setTimeout(initAutocomplete, 2000);

    var lookup = {
      "street_number": document.getElementById('checkout_shipping_address_address1'),
      "route": document.getElementById('checkout_shipping_address_address1'),
      "fullAddress": document.getElementById('checkout_shipping_address_address1'),
      "locality": document.getElementById('checkout_shipping_address_city'),
      "neighborhood": document.getElementById('checkout_shipping_address_city'),
      "administrative_area_level_1": document.getElementById('checkout_shipping_address_province'),
      "country": document.getElementById('checkout_shipping_address_country'),
      "postal_code": document.getElementById('checkout_shipping_address_zip')
    };
    var placeSearch;
    var autocomplete;
    var componentForm = {
      street_number: 'short_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'long_name',
      country: 'long_name',
      neighborhood: 'long_name',
      postal_code: 'short_name'
    };

    function initAutocomplete() {
      document.getElementById('checkout_shipping_address_address1').onFocus = "geolocate()";

      autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('checkout_shipping_address_address1')), {
          types: ['geocode']
        });

      autocomplete.addListener('place_changed', fillInAddress);
    }


    function fillInAddress() {
      var place = autocomplete.getPlace();
      for (var component in componentForm) {
        lookup[component].value = '';
      }
      var fullAddress = '';
      for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        var val = place.address_components[i][componentForm[addressType]];
        if (componentForm[addressType]) {
          switch (addressType) {
            case 'street_number':
              fullAddress = val + fullAddress;
              break;
            case 'route':
              fullAddress = fullAddress + ' ';
              fullAddress = fullAddress + val;
              break;
            case 'neighborhood':
              lookup.neighborhood.value = val;
              break;
            case 'locality':
              lookup.locality.value = val;
              break;
            case 'administrative_area_level_1':
              lookup.administrative_area_level_1.value = val;
              break;
            case 'country':
              lookup.country.value = val;
              break;
            case 'postal_code':
              lookup.postal_code.value = val;
              break;
          }
        }
      }
      lookup.fullAddress.value = fullAddress;
    }

    function geolocate() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var geolocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
          var circle = new google.maps.Circle({
            center: geolocation,
            radius: position.coords.accuracy
          });
          autocomplete.setBounds(circle.getBounds());
        });
      }
    }


  };
}
</script>

Any idea how I could solve this?

Answer 1

if (window.location.href.indexOf('checkout') > -1) { window.onload = function() {

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places";
    script.async = "true";
    script.defer = "defer";
    document.body.appendChild(script);

    setTimeout(initAutocomplete, 2000);

    var lookup = {
        "street_number": document.getElementById('checkout_shipping_address_address1'),
        "route": document.getElementById('checkout_shipping_address_address1'),
        "fullAddress": document.getElementById('checkout_shipping_address_address1'),
        "locality": document.getElementById('checkout_shipping_address_city'),
        "neighborhood": document.getElementById('checkout_shipping_address_city'),
        "administrative_area_level_1": document.getElementById('checkout_shipping_address_province'),
        "country": document.getElementById('checkout_shipping_address_country'),
        "postal_code": document.getElementById('checkout_shipping_address_zip')
    };
    var placeSearch;
    var autocomplete;
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'long_name',
        country: 'long_name',
        neighborhood: 'long_name',
        postal_code: 'short_name'
    };

    function initAutocomplete() {
        document.getElementById('checkout_shipping_address_address1').onFocus = "geolocate()";

        autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('checkout_shipping_address_address1')), { types: ['geocode'] });

        autocomplete.addListener('place_changed', fillInAddress);
    }


    function fillInAddress() {
        var place = autocomplete.getPlace();
        for (var component in componentForm) {
            lookup[component].value = '';
        }
        var fullAddress = '';
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            var val = place.address_components[i][componentForm[addressType]];
            if (componentForm[addressType]) {
                switch (addressType) {
                    case 'street_number':
                        fullAddress = val + fullAddress;
                        break;
                    case 'route':
                        fullAddress = fullAddress + ' ';
                        fullAddress = fullAddress + val;
                        break;
                    case 'neighborhood':
                        lookup.neighborhood.value = val;
                        break;
                    case 'locality':
                        lookup.locality.value = val;
                        break;
                    case 'administrative_area_level_1':
                        lookup.administrative_area_level_1.value = val;
                        break;
                    case 'country':
                        lookup.country.value = val;
                        break;
                    case 'postal_code':
                        lookup.postal_code.value = val;
                        break;
                }
            }
        }
        lookup.fullAddress.value = fullAddress;
    }

    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var geolocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
            });
        }
    }


};

}