Codeigniter 4 Google Autocomplete Address Search Box Example

In this article, we will explain to you how to create a google autocomplete address search box example in CodeIgniter 4(Codeigniter 4 Google Autocomplete Address Search Box Example). we can easily create the google autocomplete search box using google API in CodeIgniter 4(Codeigniter 4 search box).

In this example, we use the “Maps JavaScript API” and “Places API” services to add google autocomplete address/place the search box in Codeigniter 4. so you can see our following example.

Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Create Google Maps API
Step 4: Create Controller
Step 5: Create Views Files
Step 6: Run The Application

Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.

Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url

Step 3: Create Google Maps API
In this step, we need the Google Maps API key. So first we go to the Google Cloud Platform Console, create the project and get the Google Maps API key.

Step 4: Create Controller
In this step we will create the controller “Autocomplete.php”. after creating the controller we will create the index() method and it will call the view file. for this, you can follow the example.
app/Controllers/Autocomplete.php

<?php 

namespace App\Controllers;
 use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
 
class Autocomplete extends Controller
{
	
	public function index()
	{
		return view('google_search');
	}
	
}

?>

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

use CodeIgniter\HTTP\RequestInterface;

class Autocomplete extends Controller

{

public function index()

{

return view('google_search');

}

Step 5: Create Views Files
Finally, we will create the list.php in the app/views directory.
app/views/google_search.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="The tiny framework with powerful features">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codeigniter 4 Google Autocomplete Address Search Box Example - XpertPhp</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      .container {
        max-width: 500px;
      }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="form-group mb-3">
           <h3 class="mb-3"> Find Address or Location</h3>
           <input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Choose Location">
        </div>
        <div class="form-group mb-3" id="latitudeArea">
           <label>Latitude</label>
           <input type="text" class="form-control" name="latitude" id="latitude">
        </div>
        <div class="form-group mb-3" id="longtitudeArea">
           <label>Longitude</label>
           <input type="text" class="form-control" name="longitude" id="longitude">
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maps.google.com/maps/api/js?key=your-api-key&libraries=places&callback=initAutocomplete"></script>
    <script>
        $(document).ready(function() {
            $("#latitudeArea").addClass("d-none");
            $("#longtitudeArea").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);
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://xpertphp.com/codeigniter-print-last-query-example/" target="_blank" rel="nofollow" class="ue8ba78995d52ef8c3a7ff6b2e539e532"><style>.ue8ba78995d52ef8c3a7ff6b2e539e532{padding:0;margin:0;padding-top:1em!important;padding-bottom:1em!important;width:100%;display:block;font-weight:700;background-color:#eaeaea;border:0!important;border-left:4px solid #34495E!important;box-shadow:0 1px 2px rgba(0,0,0,.17);-moz-box-shadow:0 1px 2px rgba(0,0,0,.17);-o-box-shadow:0 1px 2px rgba(0,0,0,.17);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.17);text-decoration:none}.ue8ba78995d52ef8c3a7ff6b2e539e532:active,.ue8ba78995d52ef8c3a7ff6b2e539e532:hover{opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms;text-decoration:none}.ue8ba78995d52ef8c3a7ff6b2e539e532{transition:background-color 250ms;webkit-transition:background-color 250ms;opacity:1.11;transition:opacity 250ms;webkit-transition:opacity 250ms}.ue8ba78995d52ef8c3a7ff6b2e539e532 .ctaText{font-weight:700;color:#464646;text-decoration:none;font-size:16px}.ue8ba78995d52ef8c3a7ff6b2e539e532 .postTitle{color:#000;text-decoration:underline!important;font-size:16px}.ue8ba78995d52ef8c3a7ff6b2e539e532:hover .postTitle{text-decoration:underline!important}</style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">See also</span>  <span class="postTitle">codeigniter print last query example</span></div></a></div>            
            autocomplete.addListener('place_changed', function() {
                var place = autocomplete.getPlace();
                
                $('#latitude').val(place.geometry['location'].lat());
                $('#longitude').val(place.geometry['location'].lng());
                
                $("#latitudeArea").removeClass("d-none");
                $("#longtitudeArea").removeClass("d-none");
            });
        } 
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Codeigniter 4 Google Autocomplete Address Search Box Example - XpertPhp</title>

<style>

.container {

max-width: 500px;

}

</style>

</head>

<body>

<h3 class="mb-3"> Find Address or Location</h3>

</div>

<label>Latitude</label>

</div>

<label>Longitude</label>

</div>

$(document).ready(function() {

$("#latitudeArea").addClass("d-none");

$("#longtitudeArea").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());

$("#latitudeArea").removeClass("d-none");

$("#longtitudeArea").removeClass("d-none");

});

}

</script>

</body>

</html>

Step 6: Run The Application
We can start the server and run the Codeigniter 4 application using the below command.

php spark serve

1	php spark serve

Now we will run our example using the below Url in the browser.

http://localhost:8080/autocomplete

1	http://localhost:8080/autocomplete