Codeigniter 4 Google Autocomplete Address Search Box Tutorial

Codeigniter 4 , Codeigniter

Nicesnippets

1661

14-08-2021


Codeigniter 4 Google Autocomplete Address Search Box Tutorial

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/[email protected]/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...


Recommended Posts