GoogleMaps Developer

Closed - This job posting has been filled and work has been completed.

Job Description

My site uses PHP (CodeIgniter), Bootstrap Twitter, jQuery, jQueryUI. It includes Google Maps.

I need a page built.

It will need to look like the images in the attachment

The tabs will be using jQueryUI tabs
Clicking anywhere on the map will switch to the Locations tab
The plus sign next to the input box on the Name tab will switch to the Location tab

Locations
On the location tab the locations will be like locations in Google Maps Directions functionality (the functionality to find a route between the locations is NOT required)
So you can click and drag them around to change the ordering
The map will update to reflect the changes (the icon letters will change)
Each location text input will use a typeahead to search for the geographic location like Google does - in fact use the Google API for this), with the
locations that match the input showing as a dropdown (select) box. Selecting the location places the icon on the map at that location's point

The locations can be removed by clicking on the little grey x
This will also update the map, removing the icon of the location selected and reordering the icons accordingly
Clicking the "Add a location" link will add a new text input box to the end of the list

Clicking on the map will bring up a list of nearby locations allowing the user to select one which adds it to the list of locations (at the end)
The existing icons are draggable and releasing the icon will open a list of locations near the release point for the user to select from and thus
change the location of that icon and the corresponding location on the left hand side

Date
On the date tab there will be jQueryUI datepicker widget with the ability to select a daterange

Companion
On the Companions tab the user can add a companion (name and email address) and have it appear in the list below with the checkbox beside it checked
It will do this by sending the details (name/email) to an ajax call and return the ID of the companion
The new checkbox will have the ID returned as the value and will share the same name as the other checkboxes

Clicking on the save trip button will send all the information on each of the tabs to an ajax call

It is vitally important that no alterations occur in any of the core javascript libraries (jquery, jqueryui etc)
A dummy variable can be used to simulate the return from the AJAX call to load a new companion

My PHP code follows the coding style guide for CodeIgniter. I would like the javascript code to also follow this coding style as much as possible.

The exact representation of the final product need not match the images in the attachment perfectly, however the result has to have css from Twitter-Bootstrap in it so that the Twitter-Bootstrap styles can be used

Please contact me with any comments or questions

---
Skills: google-maps

Open Attachment