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.
|
1 2 3 4 5 6 7 8 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!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&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> |
