In this example, we will see how to install and use the Google Maps CI library with some cool services. First, we need to download the library files from http://biostall.com/codeigniter-google-maps-v3-api-library.
In the downloaded TAR file, we shall find the following libraries:
Googlemaps.php: This is the Google Maps API library for CI. We shall place it atapplication/libraries/.Jsmin.php: This is an auxiliary code for the library to generate the JavaScript generated code for enabling the smart Google Maps UI interaction. We shall also place it atapplication/libraries/.- Google Maps V3 API: This is a PDF file for in-depth, possible library settings and usage.
In this example, we will provide an initial page showing several marked places together on the Google Map window that we will create in our application. In that visualized view, we will enable the user to zoom into predefined selected places we have marked on the map using the CI anchor URL helper.
This example will be constructed from the following library, controller, and view:
application/libraries/: This is the CI wrapper library for Google Maps that we downloaded. Refer to the CI library contributor website at http://biostall.com.application/controllers/gmaps.php: This controller loads thegooglemapslibrary and builds up several views for several places shown together on the Google Map, and zooms in to each of the places.$this->load->library('googlemaps'),The controllers prepare vectors of map settings and the list of places and possible controllers to zoom into each of the places, and render a view named
google_map_view.application/views/google_map_view.php: This is the rendered view that initially shows all the places on the Google Map, and lets the user zoom in using a menu option to a listed zoom-in location, or go back to the view of all the places together on a zoom-out map.
Let us assume the URI to the project root is http://mydomain.com/myproject. http://mydomain.com/myproject/gmaps.
The controller file controllers/gmaps.php will initially load the CI Google Maps library, then set up the maps' settings and the places to be marked and shown in different views (the same view file is rendered with different $data settings each time). The controller will have the __construct() and index() methods, in addition to set the zoom in on the defined places.
<?php
/** Use The Google Maps CI Library Wrapper for severalmarked places altogether and zoom-in*/
class Gmaps extends CI_Controller {
function __construct()
{ parent::__construct();
$this->load->library('googlemaps'),
// Set the map window sizes:
$config['map_width'] = "1000px";
// map window width
$config['map_height'] = "1000px";
// map window height
$this->googlemaps->initialize($config);
}
function index() {
/* Initialize and setup Google Maps for our App startingwith 3 marked places
London, UK, Bombai, India, Rehovot, Israel
*/
// Initialize our map for this use case of show 3// places altogether.
// let the zoom be automatically decided by Google for showing// the several places on one view.
$config['zoom'] = "auto";
$this->googlemaps->initialize($config);
//Define the places we want to see marked on Google Map!
$this->add_visual_flag ('London, UK'),
$this->add_visual_flag ('Bombai, India'),
$this->add_visual_flag ('Rehovot, Israel'),
$data = $this->load_map_setting ();
// Load our view, passing the map data that has just been//created.
$this->load->view('google_map_view', $data);
}
//The class Gmaps continued with several more functions as//follows:
function london() {
// Initialize our map
//Here you can also pass in additional parameters for// customizing the map (see the following code:)
// Define the address we want to be on the map center
$config['center'] = 'London, UK'; to be on the map center
// Set Zoom Level - Zoom 0: World – 18 Street Level
$config['zoom'] = "16";
$this->googlemaps->initialize($config);
// Add visual flag
$this->add_visual_flag ($config['center']);
$data = $this->load_map_setting ();
// Load our view passing the map data that has just been//created
$this->load->view('google_map_view', $data);
}
functionBombay() {
//Initialize our map.
//Here you can also pass in additional parameters for//customizing the map (see the following code)
//Define the address we want to see as the map center
$config['center'] = 'Bombay, India';
$config['zoom'] = "16"; // City Level Zoom
$this->googlemaps->initialize($config);
// Add visual flag
$this->add_visual_flag ($config['center']);
$data = $this->load_map_setting ();
// Load our view passing the map data that has just been created
$this->load->view('google_map_view', $data);
}The class Gmaps continues with several more functions as follows:
function rehovot()
{
// Initialize our map.
//Here you can also pass in additional parameters for //customizing the map (see the following code)
$config['center'] = 'Rehovot, Israel';
$config['zoom'] = "16";
// City Level Zoom
$this->googlemaps->initialize($config);
// Add visual flag
$this->add_visual_flag ($config['center']);
$data = $this->load_map_setting ();
// Load our view, passing the map data that has just been//created.
$this->load->view('google_map_view', $data);
}
function load_map_setting ( ) {
$data = array();
$locations = array();
$controllers = array();
// Set controllers list for zoom in
$locations[] = 'London, UK';
$locations[] = 'Bombai, India';
$locations[] = 'Rehovot, Israel';
// Set controllers list for zoom in
$controllers[] = "london";
$controllers[] = "bombai";
$controllers[] = "rehovot";
$data['map'] = $this->googlemaps->create_map();
$data['locations'] = $locations;
$data['controllers'] = $controllers;
$data['map'] = $this->googlemaps->create_map();
return $data;
}The class Gmaps continues with several more functions as follows:
function add_visual_flag ( $place ) {
$marker = array();
// Setup Marker for the place and the title as the place name
$marker['position'] = $place;
$marker['title'] = $place;
$this->googlemaps->add_marker($marker);
}
}The view file will render the provided Google Maps JavaScript and HTML portions as well as render the list of places. It also provides zoom-in and zoom-out navigation options to the places supported by the controller.
<!DOCTYPE html">
<meta http-equiv="Content-type"
content="text/html; charset=utf-8" />
<html>
<head>
<script src = http://code.jquery.com/jquery-latest.js ></script>
<!--Render all the map JS provided by rendering controller-->
<?php echo $map['js']; ?>
</head>
<body>
<H3>CodeIgniter Powered CI Google Maps Library : <H3>
<HR/><ul>
<!—Let the User Always Get Back to the default Zoom out -->
<li><?php echo anchor("index.php/gmaps",
'<B>See All Locations</B>' ); ?>
</li>
<?PHP
$i=0;
foreach ($locations as $location ) {
// Show to the user all the possible Zoom Ins defined places by//the controller, so that user may zoom in by issuing the// anchor.
$controller = $controllers["$i"];
$i++; ?>
<li>
<?php echo anchor
("index.php/gmaps/$controller", "Zoom-In to ".$location ) ?>
</li>
<?PHP } ?>
}
</ul>
<HR></HR>
<?php echo $map['html']; ?>
</body>
</html>