In this tutorial guide, 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.
Sometimes we need to show/add multiple markers with info windows (like username, user contact details, user other information) on Google Maps from the database PHP CodeIgniter.
Here are steps to add multiple markers with an info window on Google Maps:
- Download Codeigniter Latest
- Basic Configurations
- Create Database With Table
- Setup Database Credentials
- Make New Controller
- Create model
- Create Views
- Implement CSS and JS
- Start Development server
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, go to applications/config/ and open the database.php file in a text editor. And add the database details like the following:
$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
);
Make New Controller
Create controller name Google.php in application/controller folder to handle display markers from database:
<?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);
}
}
?>
Create model
Now go to application/models folder and create a model name Google_model.php. After creating this model, add the below query in it:”
<?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
Create map_marker.php file in application/views/ to integrate google map with multiple markers and info windows:
<!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
Include Google Map script with API key in views file:
<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY"></script>
Implement CSS and JS
In this step, we will apply some CSS for Google Map styling. Now put the CSS code on the head section:
<style>
.container{
padding: 2%;
text-align: center;
}
#map_wrapper_div {
height: 400px;
}
#map_tuts {
width: 100%;
height: 100%;
}
</style>
To create maps on web pages and implement JavaScript code to add and show multiple markers (pins) on Google Maps with multiple infowindows:
<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
Go to the browser and hit below the url.
http://localhost/demo/google
Conclusion
That’s it, We have successfully fetched records from database and shown/add markers with infowindows on google maps php codeigniter.
If you have any questions or thoughts to share, use the comment form below to reach us.
