Today I will explain, Google maps integration with Codeigniter using the Google maps library.
Now I had taken an open source Google maps library and placed it under the Codeigniter library folder and also added jsmin.php this library accepts a string as input and returns another string as output. You can also follow Chad Kimball maps tutorial for maps integrations.
Now I will create a view file as maps.php which will display the Google maps.
For now I will show a small example to use googlemaps.php library to add marker to location.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <title>Google maps integration to Codeigniter Framework</title> <head><?php echo $map['js']; ?> <style> .googlemap { background-color: aquamarine; alignment-adjust: central; } .tb10 { background-image:url(images/form_bg.jpg); background-repeat:repeat-x; border:1px solid #d1c7ac; width: 306px; height:30px; color:#333333; padding:3px; margin-right:4px; margin-bottom:8px; font-family:tahoma, arial, sans-serif; } input#submitbutton { border:2px groove #7c93ba; cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/ padding: 5px 25px; /*give the background a gradient - see cssdemos.tupence.co.uk/gradients.htm for more info*/ background-color:#6b6dbb; /*required for browsers that don't support gradients*/ background: -webkit-gradient(linear, left top, left bottom, from(#88add7), to(#6b6dbb)); background: -webkit-linear-gradient(top, #88add7, #6b6dbb); background: -moz-linear-gradient(top, #88add7, #6b6dbb); background: -o-linear-gradient(top, #88add7, #6b6dbb); background: linear-gradient(top, #88add7, #6b6dbb); /*style to the text inside the button*/ font-family:Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/ color:#fff; font-size:1.1em; letter-spacing:.1em; font-variant:small-caps; /*give the corners a small curve*/ -webkit-border-radius: 0 15px 15px 0; -moz-border-radius: 0 15px 15px 0; border-radius: 0 15px 15px 0; /*add a drop shadow to the button*/ -webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px; -moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px; box-shadow: rgba(0, 0, 0, .75) 0 2px 6px; } /***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/ input#submitbutton:hover, input#submitbutton:focus { color:#edebda; /*reduce the spread of the shadow to give a pushed effect*/ -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px; -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px; box-shadow: rgba(0, 0, 0, .25) 0 1px 0px; } </style> </head> <body> <div class="googlemap"> <h1>eKnowledgetree Programming Blog - For More Knowledge Please Visit @ <a href="https://www.eknowledgetree.com/" background-color="red"> eKnowledgeTree</a></h1> </div> <center> <form action="google" name="mapfrm" method="post"> <input type="text" class='tb10' value="" id="mapposition" name="mapposition" placeholder='madhapur,hyderabad'></input> <input type="submit" name="submitbutton" id='submitbutton' value="Add Marker"> </form></center> <br> <?php echo $map['html']; ?> </body> </html>
Here in the above code I am sending location name to the controller function google().
Now we will use these lacation name and passed it into library function initialize()
To configure google map.
<?php class Mapview extends CI_Controller { public function google() { $this->load->library('googlemaps'); $config['center'] = $this->input->post('mapposition'); $config['zoom'] = '15'; $this->googlemaps->initialize($config); $marker = array(); $marker['position'] = $this->input->post('mapposition'); //$marker['position'] = 'india,hyderabad'; $this->googlemaps->add_marker($marker); $data['map'] = $this->googlemaps->create_map(); $this->load->view('demos/maps', $data); } } ?>
Here I also used library function add_ marker() to create marker in the Google maps.
Thanks for reading this article.
Live Demo
Download
[sdm_download_counter id=”84″]
Leave A Comment