How to add multiple markers in google maps using Codeigniter – onlinecode
In this post we will give you information about How to add multiple markers in google maps using Codeigniter – onlinecode. Hear we will give you detail about How to add multiple markers in google maps using Codeigniter – onlinecodeAnd how to use it also give you demo for it if it is necessary.
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 tableStep 2: Create Database TablesStep 3: Create ControllerStep 4: Create a ModelStep 5: Create View File
Step 1: Create Database in tableIn 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;
Step 2: Connect to DatabaseGo 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 );
Step 3: Create ControllerIn 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>".$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 ModelIn 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();
}
}
?>Step 5: Create View FileSo 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 >
<div >
<div >
<div ><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&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>Hope this code and post will helped you for implement How to add multiple markers in google maps using Codeigniter – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs