Laravel Integrate Place Autocomplete using Google Map API

Hello Artisans, today I'll show you how to add google autocomplete in your laravel application. Google autocomplete nowadays quite necessary for a website. Suppose you have a restaurant, and the user doesn't know where the restaurant is located. But if there is google autocomplete, then the user can search for your restaurant So, let's see how we can easily integrate place autocomplete in google map in our laravel application.

Note: Tested on Laravel 9.19

Table of Contents

  1. Update .env file
  2. Setup View
  3. Output

Update .env File

Now, we'll add new variable in .env file to set google map api key which we'll use later in blade file. See below source code


Setup View

Now we'll update our default blade file called welcome.blade.php which is come by default. Now open the file and replace with below codes.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Google Autocomplete in Laravel -</title>

<div class="container mt-5">
    <h2>Google Autocomplete Address in Laravel -</h2>
    <div class="form-group">
        <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Choose Location">

    function initMap() {
        const input = document.getElementById("autocomplete");

        const options = {
            fields: ["formatted_address", "geometry", "name"],
            strictBounds: false,
            types: ["establishment"],

        const autocomplete = new google.maps.places.Autocomplete(input, options);

        autocomplete.addListener("place_changed", () => {
            const place = autocomplete.getPlace();

            if (!place.geometry || !place.geometry.location) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '"   "'");
                return false;

    window.initMap = initMap;
<script type="text/javascript"
        src="{{ env('GOOGLE_MAP_KEY') }}&callback=initMap&libraries=places&v=weekly" ></script>



And finally, we're ready with our setup. It's time to check our output. Now go to, If everything goes well (hope so) we can see the below output.

That's it for today. I hope you've enjoyed this tutorial. You can also download this tutorial from GitHub. Thanks for reading. ๐Ÿ™‚