CodeIgniter 4 Tutorial- Autocomplete Address Search Box Example

Google Autocomplete Search Box displays the places, address and location as soon as the user starts typing in the form input widget. It provides address suggestions within a fraction of seconds.

If you are a novice in building the CodeIgniter apps, then you don’t have to worry since this tutorial will make you learn how to add Google Autocomplete address/place the search box in the CodeIgniter 4 application using the Google API.

 

Many of us already know that Google API allows us to access the location data, to acquire the Google API we need to visit the Google cloud platform.

In addition to that, we will suggest how to capture the API from the Google cloud platform and display the auto-suggest addresses and places in the CodeIgniter apps.

 

How To Add Autocomplete Address Search In CodeIgniter 4 Using Google API

See the below step for executing the above feature in the CI 4 application:

Step 1- Create CodeIgniter Project

Step 2- CI Error Handling

Step 3- Get Google Maps API Key

Step 4- Connect To Database

Step 5- Create Controller

Step 6- Create Route

Step 7- Add Autocomplete Widget In View

Step 8- Run CI App

 

Let’s learn in detail now:

Step 1- Create CodeIgniter Project

The very first step is to download the CodeIgniter app which we can do by two methods.

One method is to invoke the given command after we have configured the Composer in our system:

composer create-project codeigniter4/appstarter

In the second method, we simply visit the CodeIgniter site and download the CodeIgniter app.

https://codeigniter.com/download

 

Display Errors

We can turn on the feature to errors, go to the app/Config/Boot/production.php and change display_errors prop value to 1 from 0.

ini_set('display_errors', '1');

 

Get Google Maps API Key

The next step of this tutorial is to get the Google API key. It will enable communication between the client and the Google server. See the below steps for doing so:

• Visit Google Cloud Platform.
• Then, click on the project dropdown at the top to create the project.
• Click APIs & Services > Credentials.
• Afterward, click on Create Credentials > API Key.
• Copy Google API and store in some text files.
• Then, enable a few services for which we click on Credentials > “Enable APIs and Services”. In addition, enable “Maps JavaScript API” and “Places API” services.

 

Connect CI To Database

The below step shows to connect CI app to the database wherein we insert the database name, username and password in the app/Config/Database.php:

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'codeigniter_db',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => (ENVIRONMENT !== 'development'),
        'cacheOn'  => false,
        'cacheDir' => '',
        'charset'  => 'utf8',
        'DBCollat' => 'utf8_general_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
    ];

 

Setting Up Controller

Many of us must already be aware that the Controllers does plenty of work. In this guide, we use it for loading the view template. So, create a controller file (AutocompleteController.php) in Controllers directory after which we open and insert the code in app/Controllers/AutocompleteController.php:

<?php 

namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;

class AutocompleteController extends Controller
{

  public function index() {
    return view('index');
  }

}

Create Route

Here, in this step, we have to add the new route for displaying the Google autocomplete address search box component in the CodeIgniter application. So, we will update the app/Config/Routes.php:

$routes->get('/', 'AutocompleteController::index');

 

Implement Google Autocomplete Search In CodeIgniter

Lastly, we create the view file for viewing the autocomplete location search. It allows to integrate Google autocomplete search box in CodeIgniter.

Then, we will create index.php view file in app/Views/, where we update the following code into app/Views/index.php:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Codeigniter Google Autocomplete Address Search Example</title>
	<meta name="description" content="The tiny framework with powerful features">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<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>

<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=AIzaSyCMwpWumynr-7cPLX_paKYViBYFqqnUidc&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);
		
		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>

</div>


</body>
</html>

Run CI Application

Since we have reached the last step of this tutorial, we will use the below code for running the CI app:

php spark serve

 

Summary

So, friends, we have learnt throughout this tutorial to implement Autocomplete search address in CodeIgniter using Google map API key.

 

Thanks