Calcul de distance et prix

Bonjour,

Je vous explique

Je suis entrain de développer un site pour une société de taxi. Dans ce site, il y aura un module de reservation en ligne avec un formulaire qui calcul automatiquement le prix de la réservation en fonction de la distance, de l'horaires et du nombre de personnes.

Je rencontre actuellement deux soucis :

1 - L’autocomplétion des champs du formulaire à l'aide de google api fonctionne une fois sur trois et je ne sais pas d'ou provient le soucis.

2 - Le calcul du prix s'effectue directement lorsque le champ "arrivée" est complété alors que je souhaite calculer le prix qu'une fois la date, l'heure et le nombre de personnes compléte avec un bouton calculer. (Dans ce code, je n'ai pas encore intégré la prise en compte de l'horaires et du nombre de personne dans le calcul de prix, je suis encore en développement)

Voici mon code que j'ai récupérer dans la doc officiel de google api et pour le calendrier, j'ai adapté le datetimepicker. Merci pour toutes vos critiques et votre aide.

index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styleForm.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcwhk5U0J9pxXIgiw-6fe0CpUMwjd96mU&libraries=places&callback=initMap"
        async defer></script>
<script src="js/googleApi.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
      <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
 
 
<div class="clearfix"></div>
 
<div class="container">
<div class="row">
<form class="top">
<div class="col-xs-3">
 
  <div class="form-group">
    <input type="text" class="form-control" id="origin-input" placeholder="Départ">
  </div>
 
</div>
 
<div class="col-xs-3">
  <div class="form-group">
    <input type="text" class="form-control" id="destination-input" placeholder="Arrivé">
  </div>
</div>
 
<div class="col-xs-3">
  <div class="form-group">
       <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'fr'
                });
            });
        </script>         
</div>
 
<div id="dtBox"></div>
 
 
<div class="col-xs-3">
<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>
 
</form>
 
<div class="clearfix"></div>
 
<div id="map" style="display:none"></div>
<div class="text-center">
  <div id="total"></div>
</div>
 
</div><!--row-->
</div><!--container-->

googleApi.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          mapTypeControl: false,
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13
        });
 
        new AutocompleteDirectionsHandler(map);
      }
 
       /**
        * @constructor
       */
      function AutocompleteDirectionsHandler(map) {
        this.map = map;
        this.originPlaceId = null;
        this.destinationPlaceId = null;
        this.travelMode = 'DRIVING';
        var originInput = document.getElementById('origin-input');
        var destinationInput = document.getElementById('destination-input');
        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer;
        this.directionsDisplay.setMap(map);
 
        /*var options = {
        types: ['(cities)'],
        componentRestrictions: {country: ['fr', 'ch', 'de']}
        };*/
 
 
        //var originAutocomplete = new google.maps.places.Autocomplete(originInput, options);
 
        var originAutocomplete = new google.maps.places.Autocomplete(
            originInput, {placeIdOnly: true});
        var destinationAutocomplete = new google.maps.places.Autocomplete(
            destinationInput, {placeIdOnly: true});
 
        this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
        this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
 
        //this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
        //this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
      }
 
 
      AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
        var me = this;
        autocomplete.bindTo('bounds', this.map);
        autocomplete.addListener('place_changed', function() {
          var place = autocomplete.getPlace();
          if (!place.place_id) {
            window.alert("Please select an option from the dropdown list.");
            return;
          }
          if (mode === 'ORIG') {
            me.originPlaceId = place.place_id;
          } else {
            me.destinationPlaceId = place.place_id;
          }
          me.route();
        });
 
      };
 
      AutocompleteDirectionsHandler.prototype.route = function() {
        if (!this.originPlaceId || !this.destinationPlaceId) {
          return;
        }
        var me = this;
        this.directionsService.route({
          origin: {'placeId': this.originPlaceId},
          destination: {'placeId': this.destinationPlaceId},
          travelMode: this.travelMode
        }, function(response, status) {
          if (status === 'OK') {
            me.directionsDisplay.setDirections(response);
			computeTotalDistance(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      };
	  function computeTotalDistance(result) {
          var total = 0;
          var myroute = result.routes[0];
          for (i = 0; i < myroute.legs.length; i++) {
            total += myroute.legs[i].distance.value;
          }
          total = total / 1000;
              var prix = 2;
          document.getElementById("total").innerHTML = "La distance totale est = " + total + " km <br> Le prix est donc de " + total*prix;
         }

Calcul de distance et prix - google Api