ghl-experts-logo-light
  • CSS AND STYLING

    SCRIPTS AND HACKS

  • Address Auto Complete – Google Places API (MIKE)

    Use the below snippet to have an Auto-Complete Address input powered by google.

    It will fill in all the address fields separately: City, State and Postal Code

    NOTE*:
    You will need a Google Places API key.
    Please Make Sure to Enable the Google Maps API as well as the Google Places API

    <script>
      var city = document.querySelector('input[name="city"]');
      city.parentElement.parentElement.parentElement.parentElement.style.display = "none"
      var state = document.querySelector('input[name="state"]')
      state.parentElement.parentElement.parentElement.parentElement.style.display = "none"
      var postalCode = document.querySelector('input[name="postal_code"]')
      postalCode.parentElement.parentElement.parentElement.parentElement.style.display = "none"
    </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
    <script>
    var input = document.querySelector('input[name="address"]');
    var options = {
      types: ['address']
    };
    var componentForm = {
      street_number: 'short_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'short_name',
      country: 'long_name',
      postal_code: 'short_name'
    };
    
    autocomplete = new google.maps.places.Autocomplete(input, options);
    autocomplete.setFields(['address_component']);
    autocomplete.addListener('place_changed', fillInAddress);
    function fillInAddress() {
      var place = autocomplete.getPlace();
      console.log(place)
      var street;
      var address = document.querySelector('input[name="address"]')
      var city = document.querySelector('input[name="city"]');
      var state = document.querySelector('input[name="state"]')
      var postalCode = document.querySelector('input[name="postal_code"]')
    
      place.address_components.forEach(addressComp => {
        var addressType = addressComp.types[0];
        var val = addressComp[componentForm[addressType]];
        if (addressType == "street_number") {
          console.log(val)
          street = val;
        } else if (addressType == "route"){
          console.log(val)
          street += " " + val;
        } else if(addressType == "locality") {
          console.log(val)
          city.value = val
        } else if(addressType == "administrative_area_level_1") {
          console.log(val)
          state.value = val
        } else if(addressType == "postal_code") {
          console.log(val)
          postalCode.value = val
        }
      });
      address.value = street
    
      var e = document.createEvent('HTMLEvents');
      e.initEvent('input', true, true);
      
      address.dispatchEvent(e);
      city.dispatchEvent(e);
      state.dispatchEvent(e);
      postalCode.dispatchEvent(e);
      
      setTimeout(function () {
      	console.log(document.querySelector(".pac-container"))
      	document.querySelector(".pac-container").style.display = "none"
        console.log(document.querySelector(".pac-container"))
      },1000)
    }
    </script>

    Welcome to GHL Expert Tools

    We are still in the process of finalizing all of our trainings and setup instructions. If you need help in the meantime, please join our Facebook Group.

    Join our Facebook Group

    Join our Facebook Group to get support, platform insights, ask questions and receive updates.

    Latest Update

    Visit our changelog page to see our most recent update.

    FOMO

    Capture leads before they leave the page by creating
    entincing offers that create a fear of missing out.

    Affiliate area

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt.