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 :
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"
You can show test for this message here
There are two potential choices
1- Geolocation doesn't work correctly :
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.
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.
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/
In this app we have
1- Services_requests controller
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_requests model
To Create new record with user location info
3- Tables directory
4- Global folder
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
See you in the next tutorial.