JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<input class="googleinput" id="autocomplete" placeholder="Введите свой адрес (Страна Город Улица)" onFocus="geolocate()"  type="text">
  <input class="googleinput_h" data-google="country" type="text">
  <input class="googleinput_h" data-google="administrative_area_level_1" type="text">
  <input class="googleinput_h" data-google="locality" type="text">
  <input class="googleinput_h" data-google="sublocality_level_1" type="text">
  <input class="googleinput_h" data-google="route" type="text">


<script>
  var placeSearch, autocomplete;
  var componentForm = {
    country: 'long_name',
    administrative_area_level_1: 'short_name',
    locality: 'long_name',
    sublocality_level_1: 'long_name',
    route: 'long_name'
  };

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

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

  function fillInAddress() {
    var place = autocomplete.getPlace();
    //console.log(autocomplete);
    //console.log(place);

    for (var i = 0; i < place.address_components.length; i++) {
      //console.log(place);
      var addressType = place.address_components[i].types[0];
      console.log(addressType);
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
     		console.log(val);
        $('[data-google="' + addressType + '"]').val(val);
      }
    }
  }

  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>
<script...

CSS

.googleinput{}
.googleinput_h{}
.pac-logo:after {
    content: "";
    padding: 0 !important;
    height: 0 !important;
    text-align: right;
    display: none !important;
    background-image: none !important;
    background-position: 0 !important;
    background-repeat: no-repeat !important;
    background-size: 0 !important;
}