Google provides a JavaScript library so that developers can implement the autocomplete search feature of places or addresses in PHP codeigniter 4 application.
Let’s start to create places autocomplete search box using google map or geolocation apis:
Step 1: Set Up Google Places API Account
Create a Google Places API account to get the secret for the app or project. Just go to Google Cloud Console, and create a new project, then go to the APIs & Services dashboard to enable the Places API, and finally create an API key for the project.
Step 2: Create a New CodeIgniter 4 Project
Run the following composer command to create a new CodeIgniter 4 project in your system:
composer create-project codeigniter4/appstarter google-autocomplete
cd google-autocompleteStep 3: Set up .env
Edit the .env file from root directory of project, and set your app.baseURL:
app.baseURL = 'http://localhost:8080'Step 4: Create a Controller
Go to app/Controllers directory, and create new controller file named AutocompleteController.php:
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class AutocompleteController extends Controller
{
public function index()
{
return view('autocomplete');
}
}Step 5: Create a View
Go to the app/Views directory, and create a new view named autocomplete.php and create an autocomplete search box using the HTML in this file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeIgniter 4 Google Autocomplete Address Search Box - ItcodStuff.com</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Google Autocomplete Address Search Box</h1>
<input id="autocomplete" type="text" placeholder="Enter your address" style="width: 300px; padding: 10px;">
</body>
</html>Step 6: Add Google Map Apis
In your views file, add the autocomplete api key with autocomplete search function:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&libraries=places"></script>
<script>
$(document).ready(function() {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place);
});
});
</script>Step 7: Set Up Routes
Edit app/Config/Routes.php file, and set up routes in it:
$routes->get('autocomplete', 'AutocompleteController::index');Step 8: Test Application
Run the following command on cmd to start application server:
php spark serveOpen your browser and type the url http://localhost:8080/autocomplete in it to test application.