Tutorials

Integrate Codieigniter with Geocomplete and Geolocation.

Google maps API is the most popular and important service for website application nowadays

While integrating this API is not easy for all web developers, for that I thought to prepare a new tutorial for simplify using this important service as possible.

In this tutorial, we used the Jquery plugin or library called geocomplete to work with Google maps for minimum code writing and easy reading.

it is :

"An advanced jQuery plugin that wraps the Google Maps API's Geocoding and Places Autocomplete services.
You simply provide an input that lets you search for locations with a nice autocomplete dropdown.
Optionally add a container to show an interactive map and a form that will be populated with the address details."

if don't know about the geocomplete plugin you can take look in their page here

Our target :

Our target from this script starts when someone visits your page, the geolocation html5 service will detect him and send notification to enable find his location with message this site "Wants to know your location"

This will be for many reasons, as an example the user denies this request by click block button or as another example, the browser is so old and doesn't support html5.

In this situation, we handle this error by the function showerror() to show the user what is the problem is and after this, it will load default location which we predefined by passing static latitude and longitude for a specific location.

2- Geolocation work correctly:

Then after click on allow button the browser will detect his location and pass latitude and longitude to the function showlocation() which will take this information to pass it to geocomplete plugin , then you will show the map with the marker and automatically populate lat and lng inputs with this information.

If you click on any position on the map by the marker it will detect this position and pass latitude and longitude to the inputs.

Not only that, we have an autocomplete input Google maps which give you the option to search for any address in Google places API and after you choose your address from autocomplete input it will pass the address , latitude, and longitude to this inputs

Finally when click on submit button all this information go to Codeigniter controller which handle saving it to the database.

Not only that, you have the function getaddress() which take the latitude and longitude from geolocation and return the address then it will populate the address inputs automatically.

Script features:

1- Detect visitor location by using html5 Geolocation API

2- Detect any error and send it again to the user

3- Send latitude, longitude and address to the inputs automatically

4- Has place autocomplete input to search for addresses

5- Has a handle click marker to specific location

6- Populate inputs with the map information after any change.

7- Commented, cleaned code.

8- Integrated code to Codeigniter PHP framework and you can use it whatever you want.

Note: Geocomplete is an advanced jQuery plugin that wraps the Google Maps API's Geocoding and Places Autocomplete Services, if you want to read the full documentation for more details you can read it from here

Note: Don't Forget to create New API Key and add it to the Url ,without doing this the script will not work

Installation:

1- Download the project from the bottom link page and extract it in localhost

2- Create new database, name it as (demo)

3- Import tables from application/tables

4- Go to the URL http://localhost/codeigniter_demo/

Project structure:

In this app we have

1- Services_requestscontroller

In this controller, we have two methods, Index which redirect to Create method, then Create method which should send location info to your table in the database.

2- Services_requestsmodel

To Create new record with user location info

3- Tables directory

ci_services_requests.sql

4- Global folder

Contains assets file like bootstrap 3 main framework and starter theme with JavaScript, HTML, CSS files, and Geocomplete directory which has JS and CSS files for this plugin

5- Views folder

Which contains views file for our layout templates with header and footer and content

How it works?

* When you see the demo page you will see popup message will ask you to share your location if you click yes then you will fill form inputs with latitude longitude and address and you will see your location on the google map.

* If you want to change your location then you should type your location in the search input, you will see many suggestions for your location if you chose one you will repopulate latitude longitude and address again.

* Then if you need more accuracy in your place then you will zoom and click on the specific location, after this, you will see the marker change to this new location and you will repopulate latitude longitude and address again.

* After this you can send this information to your table by click submit.

Note : submit will work only on the full example and not allowed in the demo