JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSBEG2eBkHa4FqsIG7rhFDl2SIIigjNUw&amp;libraries=places"></script>
<form>
  <h2>Address Autocomplete</h2>
  <div class="sv-container">
    <div class="sv-row">
      <div class="sv-col-md-12">
        <div class="sv-panel sv-panel-primary">
          <div class="sv-panel-heading">
            <h2 class="sv-panel-title">Auto Complete Form One</h2>
          </div>
          <div class="sv-panel-body">
            <div class="sv-form-container">
              <div class="sv-form-horizontal">
                <fieldset>
                  <div class="sv-panel sv-panel-default">
                    <div class="sv-panel-body" id="example-lookup-1">
                      <div class="sv-form-group" id="locationField">
                        <label for="autocomplete" class="sv-col-md-3">Start typing your address</label>
                        <div class="sv-col-md-4 ">
                          <input placeholder="Enter your address" type="text" class="sv-form-control geocomplete geocomplete-autocomplete">
                        </div>
                      </div>
                      <div class="sv-form-group">
                        <label for="street_number" class="sv-col-md-3">Street Number</label>
                        <div class="sv-col-md-2">
                          <input id="street_number" class="sv-form-control geocomplete geocomplete-street_number" type="text">
                        </div>
                        <label for="route" class="sv-col-md-2">Street Name</label>
                        <div class="sv-col-md-5">
                          <input id="route" class="sv-form-control geocomplete geocomplete-route" type="text">
                        </div>
                      </div>
                      <div class="sv-form-group">
                        <label for="locality" class="sv-col-md-3">Town</label>
                        <div class="sv-col-md-4">
                         ...

JavaScript

(function (window, document, undefined) {
  function GeoComplete(container) {
    var components = {
      street_number: 'short_name',
      route: 'long_name',
      locality: 'long_name',
      administrative_area_level_1: 'long_name',
      administrative_area_level_2: 'long_name',
      country: 'long_name',
      postal_code: 'short_name'
    };

    var input = element('autocomplete');

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

    autocomplete.addListener('place_changed', populate);

    if (input.addEventListener) { // W3C
      input.addEventListener('focus', geolocate, true);
    } else {  // IE
      input.onfocusin = geolocate
    }

    function populate() {
      var place = autocomplete.getPlace();

      for (var k in components) {
        var component = element(k);

        if (component) {
          component.value = '';
          component.disabled = false;
        }
      }

      for (var i = 0; i < place.address_components.length; i++) {
        var
          addressType = place.address_components[i].types[0],
          component = element(addressType);

        if (component) {
          component.value = place.address_components[i][components[addressType]];
        }
      }
    };

    function element(type) {
      return container.querySelector('.geocomplete-' + type);
    };

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

          autocomplete.setBounds(circle.getBounds());
        });
      }
    };
  };

  window.GeoComplete = GeoComplete;
})(window,...