완료

Draw Route using Google maps and send via ajax Part 1

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:

- form

- 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)

기술: 구글 맵스 API, HTML5, JavaScript, jQuery / 프로토 타입, PHP

확대 보기: route suggestions using google maps api, using google maps route deliveries, php route using google maps, google map php mysql store locator, google maps draw route from coordinates, draw an infinite route with multiple locations on google maps, google maps ajax markers, google maps multiple markers php mysql, draw route on google maps javascript, calculate distance between two points google maps c#, google maps php mysql demo, google maps coords ajax, generate route php google maps, google maps tab ajax mysql, google maps infowindow ajax, route creation google maps, using google maps vbnet distances, using google maps access forms, google maps clone ajax, delivery route planner google maps

고용주 소개:
( 3건의 리뷰 ) London, United Kingdom

프로젝트 ID: #14965887

수상자:

prashant8490

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

£20 GBP (1일 이내)
(77건의 리뷰)
5.6

이 프로젝트의 입찰 현황은 다음과 같습니다. 입찰자: 7명, 평균 입찰가: £69

£45 GBP (1일 이내)
(156 리뷰)
6.5
expertjlm

I have 5 years experience about CMS ( WordPress, Joomla), PHP, HTML, CSS, Javascript, PSD to CMS, PSD to HTML. Relevant Skills and Experience MySQL, PHP, Website Testing, WooCommerce, WordPress, CSS, Javascript, HTML5 더 보기

£14 GBP (1일 이내)
(59 리뷰)
5.9
wpmonsters

Hello, we are WordPress Monsters and we're ready to help you! About 2 years ago we realized that WP is exactly what customers need when they ask for a modern UI product. Since then, a special team of programmers have m 더 보기

£350 GBP (3일 이내)
(18 리뷰)
5.1
pegusinfo

Having Expertise in - - Application development & implementation using Java, J2EE technology and Web Service (SOAP, REST) - Node JS, React JS, Angular JS Relevant Skills and Experience Having Expertise in - - 더 보기

£18 GBP (1일 이내)
(1 리뷰)
1.8
£18 GBP (1일 이내)
(1 리뷰)
0.0
royaltechsystems

Hi, I have got Rich experience in Joomla, Wordpress, Codeigniter, Cake PHP), .NET, Asp.NET, Vb.NET, HTML 5 etc.& mobile apps Relevant Skills and Experience Also have very good knowledge of javascript, jQuery Json, API 더 보기

£18 GBP (1일 이내)
(0 리뷰)
0.0