Click Below to subscribe

How To Integrate Google Places Autocomplete in Laravel 2022

Google Place Library enables your application to search for places(geographic locations). In this article, we will integrate google place autocomplete in the laravel project.

1. Let's create a new laravel project.

composer create-project laravel/laravel laravel-google-places-autocomplete

2. Create a view and add the following code.


<!DOCTYPE html>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
        <div class="row mt-3">
            <div class="col-6 offset-3">
                <input class="form-control" placeholder="Enter Location" id="placeInput"/>
        <script src="" async></script>
            let autocomplete;

            /* ------------------------- Initialize Autocomplete ------------------------ */
            function initAutocomplete() {
                const input = document.getElementById("placeInput");
                const options = {
                    componentRestrictions: { country: "IN" }
                autocomplete = new google.maps.places.Autocomplete(input, options);
                autocomplete.addListener("place_changed", onPlaceChange)

            /* --------------------------- Handle Place Change -------------------------- */
            function onPlaceChange() {
                const place = autocomplete.getPlace();

Note:- Don't forget to update your Google API Key.

3. Create a controller and add the following code.

php artisan make:controller PlaceController



namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PlaceController extends Controller
    public function index()
        return view('place');

4. Create Route



use App\Http\Controllers\PlaceController;
use Illuminate\Support\Facades\Route;

| 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('/', [PlaceController::class, 'index']);

5. Finally open http://localhost/laravel-google-places-autocomplete/public in the browser.

Extras:- Place API Options

1You can pass multiple countries in options.

const options = {
  componentRestrictions: { country: ['IN', 'US'] }

2. You can also pass place types in options.

const options = {
  types: ['hospital', 'pharmacy', 'bakery', 'country'],
  componentRestrictions: { country: 'IN' }

Ref: Checkout

3. If you need to use place autocomplete inside a modal(popup). then you need to increase the z-index of .pac-container


  z-index:9999 !important;

Checkout my full angular-google-places-autocomplete example.

If you facing any issues. don't hesitate to comment below. I will be happy to help you.


How To Integrate Google Maps in Laravel 2022

Leave Your Comment