How to add multiple markers in google maps using Codeigniter

September 17, 2019 XpertPhp Comments 0 Comment

In this tutorial, we will tell you how to How to add multiple markers in Google Maps using Codeigniter Framework(google maps with multiple markers example).

It is possible to through the Google Maps API, we will show multiple markers using infowindows with javascript. so you can see below the following step.

Overview

Step 1: Create a Database in table
Step 2: Create Database Tables
Step 3: Create Controller
Step 4: Create a Model
Step 5: Create View File

Step 1: Create Database in table
In this step, we have to create a table in the database, so we will create a database using the below code.

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;

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;

Step 2: Connect to Database
Go to the config folder and open database.php file some changes in this file like hostname, database username, database password, and database name.

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'enter here database name',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

$db['default'] = array(

'dsn' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'enter here database name',

'dbdriver' => 'mysqli',

'dbprefix' => '',

'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

'cache_on' => FALSE,

'cachedir' => '',

'char_set' => 'utf8',

'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

'encrypt' => FALSE,

'compress' => FALSE,

'stricton' => FALSE,

'failover' => array(),

'save_queries' => TRUE

);

Step 3: Create Controller
In this step, we will create a Google.php file in the “application/controller” directory and paste the below code in this controller.
application/controller/Google.php

<?php
 
defined('BASEPATH') OR exit('No direct script access allowed');
 
class Google extends CI_Controller {
 
    public function __construct() {
        parent::__construct();
        // load model
        $this->load->model('Google_model', 'google');
        $this->load->helper(array('url','html','form'));
    }    
 
    public function index() {
        $users = $this->google->get_list();
 
        $markers = [];
        $infowindow = [];
 
        foreach($users 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);
     
        $this->load->view('map_marker',$location);
    }
     
}
?>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Google extends CI_Controller {

public function __construct() {

parent::__construct();

// load model

$this->load->model('Google_model', 'google');

$this->load->helper(array('url','html','form'));

}

public function index() {

$users = $this->google->get_list();

$markers = [];

$infowindow = [];

foreach($users 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);

$this->load->view('map_marker',$location);

}

Step 4: Create a Model
In this step, we will create a Google_model.php file in the “application/models” directory and paste the below code in this model.
application/models/Google_model.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
 
    class Google_model extends CI_Model {
 
        public function __construct()
        {
            $this->load->database();
        }
        
        public function get_list() {
  
        $query = $this->db->get('locations');
        return $query->result();
      
        }
    }
?>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Google_model extends CI_Model {

public function __construct()

{

$this->load->database();

}

public function get_list() {

$query = $this->db->get('locations');

return $query->result();

}

Step 5: Create View File
So finally, we will create the map_marker.php file in the “application/views/” directory.
application/views/map_marker.php

<!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 - Tutsmake.com</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
	<style>
	.container{
	  padding: 2%;
	  text-align: center;
	 
	 } 
	 #map_wrapper_div {
	  height: 400px;
	}
	 
	#map_tuts {
		width: 100%;
		height: 100%;
	}
	</style>
</head>
<body> 
<div class="container">
  <div class="row">
  <div class="col-12">
   <div class="alert alert-success"><h2>Google Maps Multiple Marker(Pins) In Codeigniter</h2>
   </div>
   <div id="map_wrapper_div">
    <div id="map_tuts"></div>
   </div>
  </div>
</div>
</body>
<script>
$(function($) {
// Asynchronously Load the map API 
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&amp;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 &amp; 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>		
</html>

<!DOCTYPE html>

<html>

<head>

<title>Google Maps Multiple Marker(Pins) In Codeigniter - Tutsmake.com</title>

<style>

.container{

padding: 2%;

text-align: center;

}

#map_wrapper_div {

height: 400px;

}

#map_tuts {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<div class="alert alert-success"><h2>Google Maps Multiple Marker(Pins) In Codeigniter</h2>

</div>

</div>

</body>

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

</html>

Please follow and like us:

Related posts: