Google Places Autocomplete in PHP

To google places autocomplete search in PHP; In this example tutorial, i am going to show you how to create google places autocomplete search without showing map in PHP.

PHP Google Places Autocomplete example without map; I will create simple html form, which is contain input box for autocomplete places. And then create main.js file, which is contain javascript code for google autocomplete places search without showing map.

Google Places Autocomplete Example Without Map in PHP

Step 1 – Create PHP Project
Step 2 – Create Autocomplete HTML Form
Step 3 – Implement JavaScript Code For Places Autocomplete

Step 1 – Create PHP Project

In step 1, Navigate to your local web server directory. And inside this directory, create one directory. And you can name this folder anything.

Here, I will “demo” the name of this folder. Then open this folder in any text editor (i will use sublime text editor).

Step 2 – Create Autocomplete HTML Form

In step 3, create a php file that named index.php. This file will display PHP simple google autocomplete search without showing map. Now, you need to add the following simple form code into index.php file:

<!doctype html>
<html lang="en">

<head>
    <title>PHP Google Autocomplete Address Example - Laratutorials.com</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12 m-auto">
                <div class="card shadow">
                    <div class="card-header bg-primary">
                        <h5 class="card-title text-white">PHP Google Autocomplete Address Example - Laratutorials.com</h5>
                    </div>

                    <div class="card-body">
                        <div class="form-group">
                            <label for="autocomplete"> Location/City/Address </label>
                            <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Select Location">
                        </div>

                        <div class="form-group" id="lat_area">
                            <label for="latitude"> Latitude </label>
                            <input type="text" name="latitude" id="latitude" class="form-control">
                        </div>

                        <div class="form-group" id="long_area">
                            <label for="latitude"> Longitude </label>
                            <input type="text" name="longitude" id="longitude" class="form-control">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script src="https://maps.google.com/maps/api/js?key=AIzaSyDxTV3a6oL6vAaRookXxpiJhynuUpSccjY&libraries=places&callback=initAutocomplete" type="text/javascript"></script>
    
    <script src="/main.js"></script>
</body>

</html>

Recommended:-Form validation using jQuery in PHP

Step 3 – Implement JavaScript Code For Places Autocomplete

In step 3, create new js file, which name main.js and implement javascript code for google autocomplete search without showing map. Then add the following code into main.js file:

$(document).ready(function() {
    $("#lat_area").addClass("d-none");
    $("#long_area").addClass("d-none");
});

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();
        $('#latitude').val(place.geometry['location'].lat());
        $('#longitude').val(place.geometry['location'].lng());

        // --------- show lat and long ---------------
        $("#lat_area").removeClass("d-none");
        $("#long_area").removeClass("d-none");
    });
}

Conclusion

To google places autocomplete search in PHP; In this example tutorial, You have learned how to create google places autocomplete search without showing map in PHP.