First of all we need to get a google maps API, go through this documentation to get an API of your own.

Next thing we need to do is to put a initializing script in our blade file

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initAutocomplete&libraries=places&v=weekly"async></script>Code language: HTML, XML (xml)

• Make sure to provide your api key in the script

The above script will call a method name initAutocomplete that we have to write in our .js file

<form> 
   <div class="row mt-3">
     <div class="col-md-12">
       <input type="text" id="address-input" name="address1" class="form-control" value="">
      <input type="hidden" name="address_latitude" id="address-latitude" value="" required/ >
      <input type="hidden" name="address_longitude" id="address-longitude" value="" required/>
     </div>
   </div>
   <div><button class="btn btn-primary" type="submit">Save Profile</button>
 </div>
</form>Code language: HTML, XML (xml)

• Make sure you form have these matching selectors

What i have done in above code

• In the above code the first method initAutocomplete() method is initializing by our script call-back
• Next thing we are getting the input keywords in locationInput constant
• Then with the help of geocoder we are manipulating our provided key word to form let long and
• Next we initializing autocomplete = new google.maps.places.Autocomplete(input);
• At the end we are getting the provide address in our place variable
• There is an another method setLocationCoordinates() i used this method to set let long so that I can store the co-ordinates along with the address in DB

That’s it, hope this help ;