Codeigniter 4 Google Map Multiple Markers Example Torque Programming
Codeigniter 

Codeigniter 4 Google Map Multiple Markers Example

torque-programming 0 Comments , , 10 min read

In this tutorial, we will learn how to add multiple markers on a Google Map using JavaScript in a PHP CodeIgniter 4 application. We will also show how to add multiple info windows with multiple markers using JavaScript.

Sometimes, you may need to show multiple markers with info windows containing user details on a Google Map from a database in a PHP CodeIgniter 4 application. This tutorial will guide you step by step on how to achieve this.

We will cover everything from adding multiple map marker points to your embedded Google Map, to displaying multiple markers on the map using API in your PHP CodeIgniter 4 application.

How to add multiple markers in google map in Codeigniter 4 app

Let’s follow the given steps to add multiple markers on google maps in CodeIgniter 4 apps:

  • Download Codeigniter 4 Project
  • Basic Configurations
  • Create Database With Table
  • Setup Database Credentials
  • Create Controller
  • Create View
  • Start Development server
  • Conclusion

Download Codeigniter 4 Project

Let’s begin by downloading the latest version of CodeIgniter 4 from the official website. You can download it from this link: https://codeigniter.com/download. Once downloaded, extract the files and save them in your local system’s xampp/htdocs/ directory.

Now, change the folder name to “demo” to make it easy to remember and work with. This step is important as we will be using the CodeIgniter 4 framework for our image file upload example.

Step 2 – Basic Configurations

In the next step, we need to make some basic configurations to the app/config/app.php we will go to the application/config/ directory and open the config.php file in a text editor.

Set Base URL Like This

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

Step 3 – Create Table in Database

To begin with, you need to create a database named demo. Open phpMyAdmin and create a new database with the name demo. Once the database is successfully created, you can use the following SQL query to create a table in the demo database. You can add some cities with city info in this table.

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

To connect your Codeigniter 4 project to the database, you need to go to the path app/Config/Database.php and open the database.php file in a text editor. After opening the file, you need to set up your database credentials like the following:

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 Controller

In this step, you will create a new controller named GoogleMap.php. Inside this controller, you will create some methods/functions. You will build some methods like:

Index() – This method is used to display cities markers with infowindows 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 named GoogleMap.php, you fetch the record from the database and create markers and infowindows. Once you have created the markers and infowindows, you pass this data to views.

Step 6 – Create View

To display the list of products, you need to create a file named “map_marker.php” in the “application/views/” folder. Then, you can add the following HTML code to show the list of products on the page.

<!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 - torqueprogramming.co.in</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 - torqueprogramming.co.in</h2></div>
                    <div id="map_wrapper_div">
                        <div id="map_torqueprogramming"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Includes Api Key

To load the Google Map JavaScript API and specify an API key in the key parameter, you can include the following code in the 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_torqueprogramming {
        width: 100%;
        height: 100%;
    }
</style>

Implement Javascript code

In this final step, you will add JavaScript code to create a map on your webpage and add/show multiple markers (pins) with multiple infowindows on Google Maps. You can put this code in a script tag after the closing of the body tag. This code will use the Google Maps JavaScript API to display the map and markers, and also create infowindows for each marker that displays additional information about the location.

<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_torqueprogramming"), 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>

After retrieving the record, you must then parse it into a JSON format and pass it to the 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

This code helps you show and add markers with info windows on Google Maps using CodeIgniter. By getting the information from your database, you can display the markers and info windows on the map in PHP CodeIgniter.

You May Also Like

Recommended Post

Get Latitude and Longitude From Address in Codeigniter Torque Programming

Get Latitude and Longitude From Address in Codeigniter

torque-programming 0

Codeigniter tutorial, you can learn how to retrieve the latitude and longitude of an address using PHP Codeigniter. To do

CodeIgniter Get File Name type Size Extension Before Upload Torque Programming

CodeIgniter Get File Name, type, Size, Extension Before Upload

torque-programming 0

CodeIgniter Get File Name. CodeIgniter is a helpful tool for making web development easier and faster. In this tutorial, we’ll

CodeIgniter 4 Pagination Example Tutorial Torque Programming

CodeIgniter 4 Pagination Example Tutorial

torque-programming 0

This tutorial demonstrates how to implement pagination with Bootstrap 4 tables in CodeIgniter 4 framework. By following this example, you

Login Logout Code in PHP Codeigniter Torque Programming

Login & Logout Code in PHP Codeigniter

torque-programming 1

In this CodeIgniter Login & Logout System tutorial, we will show you how to create a login and logout system

How to Integrate Google reCAPTCHA in PHP Codeigniter Torque Programming

Codeigniter PHP Google Recaptcha Form Validation Example

torque-programming 0

Codeigniter PHP Google Recaptcha Form Validation Example – In this tutorial, we’ll show you how to use Google reCaptcha with

Codeigniter 4 Morris Area Line Chart Example Torque Programming

Codeigniter 4 Morris Area & Line Chart Example

torque-programming 0

Codeigniter 4 Morris Area – This tutorial will show you how to create charts using Codeigniter 4 and Morris js.

Leave a Reply

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