Important: Because too many times people either dropped the project, didnt deliver working solution, or promised to deliver but took the money and disappeared without any word, we need a screenshot/video/demo of the working solution first and only then we can assign you to the project and create the milestones.
We just simply had enough of people not delivering what they promissed. We do business and we expect the same from you.
We do release payments by milestones
1. [url removed, login to view] file should have a:
- image from google maps below the form
- container with div set to 12 cols (bootstrap)
whole page should be using bootstrap (3.x)
2. On the page load, form should be displayed and image instead of the actual data from google maps should be displayed
3. form should consist of 3 items:
- two input boxes: a) FROM:, b) TO:, and third item should be the submit button to submit the fom
4. when user starts entering address in any of the first two input boxes, those should autocomplete/suggest the address using google maps api
5. After selecting any of the proposed addresses (either FROM: or TO:), image in the map area should be replaced with the actual map and marker should be dropped on the map. address from the FROM input should be marked on the map as "A" and the marker on the map from the TO input should be marked as "B"
6. Each address selected form the autocomplete list should drop the marker onto the map and support:
- when selected using mouse/touchpad
- when selected using arrow on the keyboard and approved by pressing the enter key
7. Once both locations (FROM and TO) are filled in, map should draw the route between A and B. Route should be 'driving' route only. All other options on the map should be disabled (the only ones that should be on the map are: zoom buttons, switch between terrain/satelite view)
8. If any of the addresses change (FROM or TO), new route should be redrawn on the map
9. If any of the FORM, TO is removed, map should not be reloaded, old route between A and B should still be displayed
10. If someone fills in FROM and TO and the route between A and B has been presented, and then any of the input fields change, new route should be shown.
11. Extension of the task number 10: if FROM and TO is chosen, route is shown, TO has been cleaned, and new FROM has been selected, then a new marker A should be dropped based on the FROM input but obviously no route should be shown as there is no TO (B) selected
12. After user clicks the SUBMIT button, form should check whether both input fields are filled in. If not, tooltip should be displayed with information to fill in missing input field first
13. Once all has been defined and SUBMIT button has been clicked, page should send ajax request via post method to itself ([url removed, login to view] or any other php file) with the following information in json:
key: form_details, value: [all details form the form, so 'from', 'to', submit id/name]
key: route_from, value: [value should be name of the city only! So if the address was postcode: SW1W 0RP, and selected address is 99 Buckingham Palace Rd, London then the value should be name of the city- London]
key: route_to, value: [same rules as for the route_from described above]
Once all of this has been completed, I'll provide a response from the API based on which I will create another task for you to feed all the data form the ajax response into the page (div)
Freelance Professional with Google Maps API experience Relevant Skills and Experience I have 6+ years of experience working on web development. Proposed Milestones £100 GBP - on completion