Integrate Codieigniter with Geocomplete and Geolocation

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

While integrate this API is not easy for all web developers, for that I thought to prepare 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 dont know about geocomplete plugin you can take look in thier page here

Our target :

Our target from this script starts when someone visit 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”

You can show test for this message here

There is two potential choices

1- Geolocation doesn’t work correctly :

This will be for many reasons, as 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 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 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.

You can download the source code for free from our repository here;

See you in the next tutorial.

Good luck,