How To Create Google Map Demo In Codeigniter.

Tutorial will teach you How To Create Google Map Demo In Codeigniter. Stepwise make map demo in following steps:-

step:1

Add code in application/controller/map.php

<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class Map extends CI_Controller {
function __construct()
{
parent::__construct();
}
function index()
{
//basic default controls/properties
$this->load->library(‘googlemaps’);
$config[‘zoom’] = “auto”;
$this->googlemaps->initialize($config);
$data = array();
$data[‘map’] = $this->googlemaps->create_map();
$this->load->view(‘map_view’, $data);
}
function show($place=’Crescent Park, Palo Alto’)
{
$this->load->library(‘googlemaps’);
$config[‘zoom’] = “auto”;
$this->googlemaps->initialize($config);
$marker = array();
$marker[‘position’] =”$place”;
$marker[‘animation’]=’BOUNCE';
$this->googlemaps->add_marker($marker);
$data = array();
$data[‘map’] = $this->googlemaps->create_map();
$this->load->view(‘map_view’, $data);
}
function drag()
{
$this->load->library(‘googlemaps’);

$config[‘center’] = ‘37.4419, -122.1419′;
$config[‘zoom’] = ‘auto';
$this->googlemaps->initialize($config);

$marker = array();
$marker[‘position’] = ‘37.429, -122.1419′;
$marker[‘draggable’] = true;
$marker[‘ondragend’] = ‘showCoords(event.latLng.lat(), event.latLng.lng());';
$this->googlemaps->add_marker($marker);
$data[‘map’] = $this->googlemaps->create_map();

$this->load->view(‘map_drag_view’, $data);
}
function geolocation()
{
$this->load->library(‘googlemaps’);

$config = array();
$config[‘center’] = ‘auto';
$config[‘onboundschanged’] = ‘if (!centreGot) {
var mapCentre = map.getCenter();
marker_0.setOptions({
position: new google.maps.LatLng(mapCentre.lat(), mapCentre.lng())
});
}
centreGot = true;';
$this->googlemaps->initialize($config);
$marker = array();
$marker[‘title’]=’your location';
$this->googlemaps->add_marker($marker);
$data[‘map’] = $this->googlemaps->create_map();

$this->load->view(‘map_view’, $data);
}
function direction()
{
if($this->input->post(‘submit’))
{
$this->load->library(‘googlemaps’);
$config[‘zoom’] = ‘auto';
$config[‘directions’] = TRUE;
$config[‘directionsStart’] = $this->input->post(‘place1′);
$config[‘directionsEnd’] =  $this->input->post(‘place2′);
$config[‘directionsDivID’] = ‘directionsDiv';
$this->googlemaps->initialize($config);
$data[‘map’] = $this->googlemaps->create_map();
$this->load->view(‘direction_view’, $data);
}
else
{
$data[‘map’]=false;
$this->load->view(‘direction_view’,$data);
}
}
}

step:2

add code in application/view/map_view.php

<html>
<head><?php echo $map[‘js’]; ?></head>
<body><?php echo $map[‘html’]; ?></body>
</html>

step:3

add code in application/view/map_drag_view.php
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function showCoords(newLat, newLng)
{
$(‘.ll_preview’).html(“lat:”+newLat+”, lang:”+newLng);
}
</script>
<?php echo $map[‘js’]; ?>
</head>
<body><?php echo $map[‘html’]; ?>
<div class=”ll_preview”></div></body>
</html>

step:4

add code in application/view/direction_view.php

<html>
<head><?php echo $map[‘js’]; ?></head>
<body>
<form action=”<?=site_url(‘map/direction’)?>” method=”post”>
<label for=”place1″>Start Place</label><input type=”text” name=”place1″ id=”myPlaceTextBox”/><br />
<label for=”place2″>End Place</label><input type=”text” name=”place2″/><br />
<input type=”submit” name=”submit” value=”Diection”/>
</form>
<?php echo $map[‘html’]; ?>
<div id=”directionsDiv”></div>
</body>
</html>

 

And add   libraries in libraries/Googlemaps.php

 

output will be shown below.

imgo

Thank you friends.