Laravel 10 Google Autocomplete Address Tutorial

Google Autocomplete Address is commonly used in Laravel, as well as in other web development frameworks, to enhance the user experience and improve the accuracy of address input. 

Step 1: Install Laravel 10

composer create-project laravel/laravel example-app

Step 2: Create Route

create some routes for google autocomplete address example view.


    use Illuminate\Support\Facades\Route;
    use App\Http\Controllers\GoogleController;
    | Web Routes
    | Here is where you can register web routes for your application. These
    | routes are loaded by the RouteServiceProvider within a group which
    | contains the "web" middleware group. Now create something great!
    Route::get('google-autocomplete', [GoogleController::class, 'index']);

Step 3: Create Controller


    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use Illuminate\View\View;
    class GoogleController extends Controller
         * Write code on Method
         * @return response()
        public function index(): View
            return view('googleAutocomplete');

Step 4: Put Google Map API Key in Env File



Step 5: Create Blade Files


<!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Google Autocomplete Address Example</title>
        <link rel="stylesheet" href="">
        <script src=""></script>
        <div class="container mt-5">
            <h2>Laravel Google Autocomplete Address Example</h2>
            <div class="form-group">
                <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Choose Location">
            <div class="form-group" id="latitudeArea">
                <input type="text" id="latitude" name="latitude" class="form-control">
            <div class="form-group" id="longtitudeArea">
                <input type="text" name="longitude" id="longitude" class="form-control">
            <button type="submit" class="btn btn-primary">Submit</button>
        <script src=""></script>
        <script src=""></script>
        <script type="text/javascript"
            src="{{ env('GOOGLE_MAP_KEY') }}&libraries=places" ></script>
            $(document).ready(function () {
            google.maps.event.addDomListener(window, 'load', initialize);
            function initialize() {
                var input = document.getElementById('autocomplete');
                var autocomplete = new google.maps.places.Autocomplete(input);
                autocomplete.addListener('place_changed', function () {
                    var place = autocomplete.getPlace();

Now we are ready to run 

php artisan serve

Now you can open below URL on your browser and see output: