PHP Codeigniter 4 Google Maps Multiple Markers Tutorial

In this practical Codeigniter 4 Google Maps tutorial, novice and experienced developers will learn how to integrate Google Maps in Codeigniter 4 application. Most importantly, how to add multiple location markers dynamically on Google Maps in the Codeigniter app.

This comprehensive guide will give you step by step instructions to draw markers on the Google Map. We will retrieve the location data from the database and incorporate location data into Google Maps.

The whole process is going to be dynamic, and we will use the Google Maps API key to integrate multiple markers in Codeigniter.

Not just Google map integration, but this profound guide will address the primary notions of database intercommunication with Codeigniter and how things are initiated from the root level.

After completing this article, you will implement google maps in Codeigniter and show multiple markers on Google Maps based on latitude and longitude in the Codeigniter app.

PHP Codeigniter 4 Add Multiple Location Markers on Google Maps Example

  • Step 1: Download Codeigniter Project
  • Step 2: Add Database Details
  • Step 3: Create Location Table in Database
  • Step 4: Acquire Google Maps Credentials
  • Step 5: Register Map Controller
  • Step 6: Build Route File
  • Step 7: Integrate Google Map with Multi Location Markers in View
  • Step 8: Run App in Browser

Download Codeigniter Project

In the first section, you will see couple of tips to download the fresh Codeigniter app.

You can click here to download latest version of the Codeigniter app.

You can install the Composer app on your local computer and run the provided command to install the Codeigniter project.

composer create-project codeigniter4/appstarter

Add Database Details

In this section, we will explain how to make the database connection so that we can use it for storing the location data for google maps.

Update the database name, username and password in the app/Config/Database.php.

public $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'db_username',
        'password' => 'db_password',
        'database' => 'db_name',
        '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,
    ];

Create Location Table in Database

In the previous section, database credentials were added, get into the PHPMyAdmin, create and select the database.

Further, run the provided query to create a location table with location records.

-- --------------------------------------------------------

--
-- Table structure for table `map_locations`
--

CREATE TABLE `map_locations` (
  `id` int(11) NOT NULL,
  `latitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
  `longitude` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
  `loc_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `loc_info` varchar(255) COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Dumping data for table `map_locations`
--

INSERT INTO `map_locations` (`id`, `latitude`, `longitude`, `loc_name`, `loc_info`) VALUES
(1, '52.520008', '13.404954', 'Berlin', 'Germany'),
(2, '48.135124', '11.581981', 'Munich', 'Germany'),
(3, '50.110924', '8.682127', 'Frankfurt', 'Germany'),
(4, '53.551086', '9.993682', 'Hamburg', 'Germany'),
(5, '50.937531', '6.960279', 'Cologne', 'Germany');

-- --------------------------------------------------------

Acquire Google Maps Credentials

You will need the Google Maps API key for implementing Google Maps in the Codeigniter.

Here are the steps that might help you to get the credentials.

  • Head over to Google Cloud Platform.
  • Next, create the new project in Google dashboard, you can find the setting on top left dropdown.
  • Click on APIs & Services > Credentials.
  • Next, click on Create Credentials > API key and get the google map key.
  • Get to Credentials > Enable APIs and Services, and switch-on “Maps JavaScript API” and “Places API”.

Register Map Controller

Next, step inside the app/Controllers/ folder, create a new controller file.

Create a couple of methods to access the database table, retrieve the location data, and pass it to the view file.

Open the file and constitute the provided code in app/Controllers/MapController.php.

<?php 

namespace App\Controllers;
use CodeIgniter\Controller;


class MapController extends Controller
{
    
    public function getLocations() {
        $database = \Config\Database::connect();
        $ciQuery = $database->table('map_locations');  
 
        $sql = $ciQuery->select('*')->limit(10)->get();
        $locationData = $sql->getResult();
 
        $locPins = [];
        $locInfo = [];
 
        foreach($locationData as $value) {
          $locPins[] = [
            $value->loc_name, $value->latitude, $value->longitude
          ];          
          $locInfo[] = [
           "<div><h5>".$value->loc_name."</h5><p>".$value->loc_info."</p></div>"
          ];
        }
        $location['locPins'] = json_encode($locPins);
        $location['locInfo'] = json_encode($locInfo);
     
        return view('map', $location);        
    }
 
}

Build Route File

In this section, open app/Config/Routes.php and set the default route and create a new route to execute the controller function.

/*
 * --------------------------------------------------------------------
 * Route Definitions
 * --------------------------------------------------------------------
*/

$routes->setDefaultController('MapController');

$routes->get('/google-map', 'MapController::getLocations');

Integrate Google Map with Multi Location Markers in View

So, far you have built the controller and route; in this step, we will create the view file; in this file, you will integrate the Google map along with Multiple locations makers.

Make sure to create a new view file and update the app/Views/map.php file.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Codeigniter 4 Draw Multiple Location Markers on Google Map Example</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div class="container">

<div id="drawGoogleMap" style="height: 550px; width: 100%"></div>

<script>
	$(function() {
			var script = document.createElement('script');
				script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
				document.body.appendChild(script);
			});
			
			function initialize() {
				var map;
				var bounds = new google.maps.LatLngBounds();
				var mapOptions = {
					mapTypeId: 'roadmap'
				};
								
				map = new google.maps.Map(document.getElementById("drawGoogleMap"), mapOptions);
				map.setTilt(45);
			
				var markerPins = JSON.parse(`<?php echo ($locPins); ?>`);
				var locInfo = JSON.parse(`<?php echo ($locInfo); ?>`);       
				var initWd = new google.maps.InfoWindow(), marker, i;
			
			for( i = 0; i < markerPins.length; i++ ) {
				var position = new google.maps.LatLng(markerPins[i][1], markerPins[i][2]);
				bounds.extend(position);
				marker = new google.maps.Marker({
					position: position,
					map: map,
					title: markerPins[i][0]
				});
				
				google.maps.event.addListener(marker, 'click', (function(marker, i) {
					return function() {
						initWd.setContent(locInfo[i][0]);
						initWd.open(map, marker);
					}
				})(marker, i));
			
				map.fitBounds(bounds);
			}
			
			var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
				this.setZoom(6);
				google.maps.event.removeListener(boundsListener);
			});
	
	}
</script>
</div>


</body>
</html>

Run App in Browser

To view the app, you have first to start the Codeigniter app, run the provided command on the console.

php spark serve

Type the provided url on the browser’s address bar and hit enter.

http://localhost:8080/google-map

PHP Codeigniter 4 Google Maps Multiple Markers Tutorial

Summary

We displayed how to add location markers to google maps in Codeigniter dynamically; this guide is absolutely ideal for the developers who want to work with Codeigniter applications development and are ambitious.

This guide showed you how to create a google map with multiple location markers dynamically from the database in the CodeIgniter application. Yes, this solution will work across different platforms.