Bonjour à tous,

J'ai un script de calcul d'itinéraire que voici :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
 
<body>
 
<ul class="form">
<li><label>D&eacute;part :</label><input id="start" class="w100" name="start" type="text" /></li>
<div class="input_fields_wrap">
<div class="etape">Etape 1 : <input id="etape1" class="waypoints w70" name="waypoints[]" type="text" placeholder="Sous cette forme : ville, &eacute;tat" /> <button class="u-uppercase add_field_button btn btn-primary">Ajouter une &eacute;tape</button></div>
</div>
<p><a name="resultat"></a></p>
<li><label>Arriv&eacute; :</label><input id="end" class="w100" name="end" type="text" /></li>
<li><input type="submit" id="submit" value="Calculer mon itinéraire" onclick="window.location.hash='resultat'"> ou bien <input type="button" onclick="return Confirm()" value="Réinitialiser tout" /></li>
</ul>
 
 
 
    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
    <!-- Google Map V3 -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=CLE_API&callback=initMap&libraries=places"></script>   
 
    <script>
        // Google itineraire
        function initMap() {
        
            // Google places
            google.maps.event.addDomListener(window, 'load', function () {
                var origin = new google.maps.places.Autocomplete(document.getElementById('start'));
                var destination = new google.maps.places.Autocomplete(document.getElementById('end'));
 
                var etape1 = new google.maps.places.Autocomplete(document.getElementById('etape1'));
            });        
            
            var directionsService = new google.maps.DirectionsService;
            var directionsDisplay = new google.maps.DirectionsRenderer;
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 5,
              center: {lat: 38.5209197668312, lng: -105.54345703125}
            });
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('directions-panel'));
 
            document.getElementById('submit').addEventListener('click', function() {
              calculateAndDisplayRoute(directionsService, directionsDisplay);
            });
        }
 
        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
            var waypts = [];
            var checkboxArray = document.getElementsByName("waypoints[]");
            for (var i = 0; i < checkboxArray.length; i++) {
                waypts.push({
                  location: checkboxArray[i].value,
                  stopover: true
                });
            }
 
            directionsService.route({
                origin: document.getElementById('start').value,
                destination: document.getElementById('end').value,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: 'DRIVING'
            }, 
        
            function(response, status) {
            
                if (status === 'OK') {
                    directionsDisplay.setDirections(response);
                } 
 
                else {
                    window.alert('Impossible de tracer l\'itinéraire. Cause : ' + status + '\n\nAvez vous mis au moins une étape ?\n\nAvez vous renseigné l\'état pour chaque étape (ex : Page, arizona ou Moab, utah) ?');
                }
 
 
            });
 
        }
 
        
        // Jquery
        $(document).ready(function(){
 
            // Ajouter input
            var max_fields = 23; //maximum input boxes allowed
            var wrapper = $(".input_fields_wrap"); //Fields wrapper
            var add_button = $(".add_field_button"); //Add button ID
 
            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div class="etape">Etape '+ x +' : <input class="waypoints w70" type="text" id="waypoints[]" name="waypoints[]" placeholder="Sous cette forme : ville, état" /> <a href="#" class="remove_field">Supprimer</a></div>'); //add input box
                }
                else {
                    alert("Pas plus de 25 étapes en comptant le départ et l'arrivé SVP...");
                }
            });
 
            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent("div").remove(); x--;
            })    
        
        });
    </script>
</body>
 
</html>

Sur ce script, je pars avec trois inputs qui bénéficient de Google places.
  1. Départ
  2. Première étape
  3. Arrivé


Un button permet d'ajouter via jquery des inputs pour les étapes
  1. deuxième étape
  2. troisième étape
  3. etc.


Mon problème est le suivant : Lorsque j'ajoute des inputs, je n'arrive pas à leur faire bénéficier de Google places.

Quelqu'un aurai une idée de comment faire ?