Codeigniter 4 Google Place Autocomplete Address

Autocomplete place address google api codeigniter 4 example; In this tutorial, i will guide you step by step on how to implement google place autocomplete address in Codeigniter 4 app using google apis.

Note that,Google API allows you to access location data; to acquire the google API you need to visit the google cloud platform. 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.

Create dynamic google place autocomplete address in Codeigniter 4 example; For Google autocomplete address apis, I will create a simple form in codeigniter 4 apps and add google apis with this form.

Befor start this tutorial, you need to visit: https://cloud.google.com/maps-platform/?_ga=2.27293823.277869946.1577356888-568469380.1576660626#get-started and get google API key.

Steps of to get an API key From Google Console:

  1. Visit the Google Cloud Platform Console.
  2. Click the project drop-down and select or create the project for which you want to add an API key.
  3. Click the menu button  and select APIs & Services > Credentials.
  4. On the Credentials page, click Create credentials > API key.
    The API key created dialog displays your newly created API key.
  5. Click Close.
    The new API key is listed on the Credentials page under API keys.
    (Remember to restrict the API key before using it in production.)

How To Create Google Place Autocomplete Address in Codeigniter 4

  • Install Codeigniter 4 Application
  • Basic App Configurations
  • Connect App to Database
  • Create Controller Class
  • Create Views
  • Setup Routes
  • Start Development server

Step 1 – Install Codeigniter 4 Application

First of all, you need to ownload the latest version of Codeigniter 4. So, visit this link https://codeigniter.com/download Download Codeigniter 4 app and unzip the setup in your local system xampp/htdocs/ .

Note that, please change the download folder name “demo”.

Step 2 – Basic App Configurations

Now, you need to some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.

Set Base URL like this

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';

Step 3 – Connect App to Database

To connect your codeigniter 4 app to the database. So, visit app/Config/ directory and open Database.php. Then add the databasae details like below into database.php file:

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'test',
        'password' => '4Mu99BhzK8dr4vF1',
        'database' => 'demo',
        '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 4 – Create Controller Class

Create AutocompleteController.php file. So, visit app/Controllers directory and create AutocompleteController.php.Then add the following code into it:

<?php 

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

class AutocompleteController extends Controller
{

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

}
  • The index() function renders google place autocomplete address template into the view.

Step 5 – Create Views

Create home.php view file, so visit app/views/ directory and create home.php file. Then add the following HTML into list.php file:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Codeigniter Google Place 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/[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>

<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>

Step 6 – Setup Routes

To define a route, So, visit app/Config/ directory and open Routes.php file. Then add the following routes into it:

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

Step 7 – Start Development server

Execute the following command into command prompt or terminal to start the codeigniter 4 application:

php spark serve

Then visit your web browser and hit the following url on it:

http://localhost/demo/

OR

http://localhost:8080/

Conclusion

Autocomplete place address google api codeigniter 4 example; In this tutorial, you have learned how to implement google autocomplete address in Codeigniter 4 app using google apis.

Recommended CodeIgniter 4 Tutorial

  1. How to Install / Download Codeigniter 4 By Manual, Composer, Git
  2. How to Remove Public and Index.php From URL in Codeigniter 4
  3. Codeigniter 4 Form Validation Example Tutorial
  4. How to add jQuery Validation on Form in Codeigniter 4 Example
  5. Codeigniter 4 Ajax Form Submit Validation Example
  6. Codeigniter 4 File Upload Validation Example
  7. Image Upload with Validation in Codeigniter 4
  8. Codeigniter 4 Image Upload Preview Using jQuery Example
  9. Codeigniter 4 Ajax Image Upload Preview Example
  10. How to Upload Multiple Images in Codeigniter 4
  11. Codeigniter 4 Multiple Image Upload with Preview
  12. Codeigniter 4 Pagination Example; Create Pagination in Codeigniter
  13. Simple Codeigniter 4 CRUD with Bootstrap and MySQL Example
  14. Codeigniter 4 CRUD with Datatables Example
  15. Codeigniter 4 Image Crop and Save using Croppie Example
  16. Dependent Dropdown using jQuery Ajax Example In Codeigniter 4 app
  17. CodeIgniter 4 Rest Api CRUD Example
  18. Codeigniter 4 Login Registration and Logout Example
  19. Get Address from Latitude and Longitude Ex in Codeigniter 4
  20. Codeigniter 4 Google Column Charts Example
  21. Codeigniter 4 Google ReCaptcha V2 Example
  22. Ajax Load More Data on Page Scroll In Codeigniter 4 app

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *