14-Aug-2021
.
Admin
Hi guys,
Today i will explained Google Autocomplete Address Search Box Example in Codeigniter 4. This example is so easy to use in Codeigniter 4.
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 suggestion within a fraction of seconds.
We will help you; through this profound step-by-step guide, we will teach you how to add google autocomplete address/place the search box in Codeigniter 4 app using the Google API. So let's start to the example.
Step 1: Create Codeigniter Project
composer create-project codeigniter4/appstarter
Step 2: CI Error Handling
This step is completely optional, if you want you can open app/Config/Boot/production.php and set display_errors property to 1 and enable the error debugging in Codeigniter app.
ini_set('display_errors', '1');
Step 3: Get Google Maps API Key
Our next task is to get Google API key, it will enable the communication between client and Google server.
-Go to Google Cloud Platform
-Next, click on the project dropdown at the top to create the project.
-Click APIs & Services > Credentials.
-Next, click on Create Credentials > API key.
-Copy google API and store in some text file.
-Next, enable few services, so click on Credentials > “Enable APIs and Services”, additionally enable “Maps JavaScript API” and “Places API” services.
Step 4: Connect To Database
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,
];
Step 5: Create Controller
You have to generate a new controller template, right after that add the following code into the app/Controllers/AutocompleteController.php file.
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
class AutocompleteController extends Controller
{
public function index() {
return view('index');
}
}
Step 6: Create Route
next to make the route, you need to go to app/Config/Routes.php and define the given below routes in the file
$routes->get('/', 'AutocompleteController::index');
Step 7: Add Autocomplete Widget In View
To view the autocomplete location search, create the view file, it allows us to integrate Google autocomplete search box in Codeigniter.
Add code into app/Views/index.php file.
<!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 Tutorial - Nicesnippets.com</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=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>
</body>
</html>
Step 8: Run CI Application
Now, start the Codeigniter project, moreover execute the given url on the browser to view the app in the browser.
php spark serve
Then next run the url in your browser.
http://localhost:8080
Output
Now you can check your own.
I hope it can help you...
#Codeigniter 4
#Codeigniter
