In this tutorial. you will learn how to add multiple markers with infowindows on google Maps from database in php codeigniter 4 Using javascript.
How to add multiple markers in google map in Codeigniter 4 app
Let’s follow the following steps to add multiple markers on google maps in CodeIgniter 4 apps:
- Step 1: Setup Codeigniter 4 Project
- Step 2: Basic Configurations
- Step 3: Create a Database With Table
- Step 4: Setup Database Credentials
- Step 5: Create a Controller
- Step 6: Create a View
- Step 7: Start the Development server
Step 1: Setup Codeigniter 4 Project
In this step, you will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Step 2 – Basic Configurations
Next, you will set 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: Create a Database With Table
In this step, you need to create database name demo, so let’s open your phpmyadmin and create the database with the name demo . After successfully create a database, you can use the below sql query for creating a table in your database. you will add some cities with city info.
CREATE TABLE locations ( id int(11) NOT NULL AUTO_INCREMENT, latitude varchar(20) COLLATE utf8_unicode_ci NOT NULL, longitude varchar(20) COLLATE utf8_unicode_ci NOT NULL, location_name varchar(100) COLLATE utf8_unicode_ci NOT NULL, location_info varchar(255) COLLATE utf8_unicode_ci NOT NULL, PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; INSERT INTO locations (id, name, email, contact_no, created_at) VALUES (1, '24.794500', '73.055000', 'Pindwara', 'Pindwara, Rajasthan, India'), (2, '21.250000', '81.629997', 'Raipur', 'Chhattisgarh, India'), (3, '16.166700', '74.833298', 'Gokak', 'Gokak, Karnataka, India'), (4, '26.850000', '80.949997', 'Lucknow', 'Lucknow, Uttar Pradesh, India'), (5, '28.610001', '77.230003', 'Delhi', 'Delhi, the National Capital Territory of Delhi, India'), (6, '19.076090', '72.877426', 'Mumbai', 'Mumbai, Maharashtra, The film city of India'), (7, '14.167040', '75.040298', 'Sagar', 'Sagar, Karnataka, India'), (8, '26.540457', '88.719391', 'Jalpaiguri', 'Jalpaiguri, West Bengal, India'), (9, '24.633568', '87.849251', 'Pakur', 'Pakur, Jharkhand, India'), (10, '22.728392', '71.637077', 'Surendranagar', 'Surendranagar, Gujarat, India'), (11, '9.383452', '76.574059', 'Thiruvalla', 'Thiruvalla, Kerala, India');
Step 4 – Setup Database Credentials
In this step, you need to connect our project to the database. you need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, you need to set up database credentials in this file like below.
public $default = [ 'DSN' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'demo', 'DBDriver' => 'MySQLi', 'DBPrefix' => '', 'pConnect' => false, 'DBDebug' => (ENVIRONMENT !== 'production'), 'cacheOn' => false, 'cacheDir' => '', 'charset' => 'utf8', 'DBCollat' => 'utf8_general_ci', 'swapPre' => '', 'encrypt' => false, 'compress' => false, 'strictOn' => false, 'failover' => [], 'port' => 3306, ];
Step 5 – Create a Controller
In this step, you need to create a controller name GoogleMap.php. In this controller you will create some method/function. And build some of the methods like :
- Index() – This is used to showing cities markers with infowindow on google map
<?php namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
class GoogleMap extends Controller
{
public function index() {
$db = \Config\Database::connect();
$builder = $db->table('locations');
$query = $builder->select('*')->limit(20)->get();
$data = $query->getResult();
$markers = [];
$infowindow = [];
foreach($data as $value) {
$markers[] = [
$value->location_name, $value->latitude, $value->longitude
];
$infowindow[] = [
"<div class=info_content><h3>".$value->location_name."</h3><p>".$value->location_info."</p></div>"
];
}
$location['markers'] = json_encode($markers);
$location['infowindow'] = json_encode($infowindow);
return view('map_marker',$location);
}
}
In this controller function, you fatch the record from database and created markers, infowindows in this google.php controller. After you have created markers and infowindows, pass this data to views.
Step 6 – Create a View
Now you need to create map_marker.php, go to application/views/ folder and create map_marker.php file. Here put the below html code for showing list of product.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Google Maps Multiple Marker(Pins) In Codeigniter 4 - Tutsmake.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="alert alert-success"><h2>Codeigniter 4 Display Multiple Markers on Google Maps - Tutsmake.com</h2>
</div>
<div id="map_wrapper_div">
<div id="map_tuts"></div>
</div>
</div>
</div>
</body>
</html>
Includes Api Key
Load the Google Map JavaScript API and specify an API key in the key parameter and include on map_marker .php file
<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY"></script>
Implement css
In this step you will implement some css for google map styling. Now put the css code on head section :
<style>
.container{
padding: 2%;
text-align: center;
}
#map_wrapper_div {
height: 400px;
}
#map_tuts {
width: 100%;
height: 100%;
}
</style>
Implement Javascript code
Finally you will implement javascript code for creating a map on web pages and adding and showing multiple markers ( pins ) on google maps with multiple infowindow. Now you will put the code on script tag after the closing of body tag.
<script>
$(function() {
// Asynchronously Load the map API
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'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_tuts"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = JSON.parse(`<?php echo ($markers); ?>`);
console.log(markers);
var infoWindowContent = JSON.parse(`<?php echo ($infowindow); ?>`);
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(5);
google.maps.event.removeListener(boundsListener);
});
}
</script>
Here you have got the record. After you have to parse.json this record and pass into markers and infowindows function.
Step 7 – Start Development server
In this step, open your terminal and execute the following command on it to start development server:
php spark serve
Then Go to the browser and hit below the url.
http://localhost/demo/GoogleMap
Conclusion
In this codeigniter show/add markers and infowindows from database. you have successfully got the records from the database and show/add the markers with infowindows on google map php codeigniter.
If you have any questions or thoughts to share, use the comment form below to reach us.
