In this codeigniter show/add multiple markers on google map tutorial, We would love to share with you how to add multiple markers on google map from database php codeigniter Using javascript. We will also add/show multiple infowindows with multiple markers using javascript.
Sometime we need to show/add multiple markers with infowindows(like users name, user contact detail, user other info) on google map from database php codeigniter. Here You will learn each thing step by step about multiple markers and multiple infowindows on google map.
Codeigniter Google Map
Contents
- Download Codeigniter Latest
- Basic Configurations
- Create Database With Table
- Setup Database Credentials
- Make New Controller
- Create model
- Create Views
- Start Development server
- Conclusion
Download Codeigniter Project
In this step we will download the latest version of Codeigniter, Go to this link Download Codeigniter download the fresh setup of codeigniter and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Basic Configurations
Next we will set the some basic configuration on config.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
$config['base_url'] = 'http://localhost/demo/';
Create Database With Table
In this step, we 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. We 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');
Setup Database Credentials
In this step, We need to connect our project to database. we need to go application/config/ and open database.php file in text editor. After open the file in text editor, We need to setup database credential in this file like below.
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'demo',
'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
);
Create Controller
Now we need to create a controller name Google.php. In this controller we will create some method/function. We will build some of the methods like :
- Index() – This is used to showing cities markers with infowindow on google map
<?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);
}
}
?>
In this controller function, we fatch the record from database and created markers, infowindows in this google.php controller. After we have created markers and infowindows, pass this data to views.
Create model
Now go to application/models folder and create a one model name Google_model.php . After create this model put the below query in to model.
<?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();
}
}
?>
Create Views
Now we 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 - 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>Google Maps Multiple Marker(Pins) In Codeigniter</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 we 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 we 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 we 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 we have got the record. After we have to parse.json this record and pass into markers and infowindows function.
Start Development server
For start development server, Go to the browser and hit below the url.
http://localhost/demo/google
Conclusion
In this codeigniter show/add markers and infowindows from database. We have successfully got the records from the database and show/add the markers with infowindows on google map php codeigniter.
