JSFiddle - React, Tailwind, and code Playground

by Mubasshir Pawle

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>
<div id="map">

</div>
<input id="autocomplete" placeholder="Enter your address" type="text" />
<input id="sublocality" placeholder="sublocalty" type="text" readonly/>

CSS

#autocomplete {
  width: 300px;
}

#map {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}

JavaScript

function initialize() {

  var place;
  var autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 19.1147775,
      lng: 72.8509808
    },
    zoom: 10
  });
  autocomplete.bindTo('bounds', map);
  autocomplete.setTypes(['address']);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });


  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }
    console.log(place);

    for (var i = 0; i <= place.address_components.length; i++) {
      var address = place.address_components[i];

      if (address.types.indexOf('sublocality_level_1') !== -1) {
        $('#sublocality').val(address.long_name);
        break;

      }
    }
  });
}

initialize();