Googleマップの自動配列を動的配列

Question

Googleマップ（場所）の自動補完APIにアクセスするために必要な動的テキスト入力があります。

「開始」、「終了」、および「第1のウェイポイント」（動的ではない）はうまくいきますが、4時間後には動的テキスト入力をオートコンプリートにするのに苦労しています。そして、Googleの答えに似て何かを見つけることができません。

これは私がこれまで持っているものです： Javascriptを：

function initialize() { 
var options = { 
    componentRestrictions: { 
     country: "au" 
    } 
}; 

var inputs = document.getElementById('start'); 
var autocompletes = new google.maps.places.Autocomplete(inputs, options); 
var inpute = document.getElementById('end'); 
var autocompletee = new google.maps.places.Autocomplete(inpute, options); 

var waypoints = document.getElementsByName("waypoints[]"); 
for (var i = 0; i < waypoints.length; i++) { 
var inputw = waypoints[i]; 
var autocompletew = new google.maps.places.Autocomplete(inputw, options); 
} 


directionsDisplay = new google.maps.DirectionsRenderer(); 
var melbourne = new google.maps.LatLng(-31.953512, 115.857048); 
var myOptions = { 
    zoom: 12, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: melbourne 
} 

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
directionsDisplay.setMap(map); 

} 

HTML：

var counter = 1; 
var limit = 10; 
var i = 1; 
function addInput(divName){ 
if (counter == limit) { 
     alert("You have reached the limit of adding " + counter + " inputs"); 
} 
else { 
     var newdiv = document.createElement('div'); 
     newdiv.innerHTML = (counter + 1) + "<input type=text name=waypoints[] autocomplete=on>"; 
     document.getElementById(divName).appendChild(newdiv); 
     counter++; 
i++; 
var inputw = waypoints[i]; 
var autocompletew = new google.maps.places.Autocomplete(inputw, options); 

    } 
} 

私はPHPでかなり堪能していますが、それでも非常にJavascriptを学びました。

Answer 1

動的にそれへの参照を使用して、その後、コンテンツを作成する私の作品：

function addInput(divName) { 
    if (counter == limit) { 
    alert("You have reached the limit of adding " + counter + " inputs"); 
    } else { 
    var newbr = document.createElement('br'); 
    var newtxt = document.createTextNode(""+(counter+1)); 
    var newinput = document.createElement("input"); 
    newinput.setAttribute("name","waypoints[]"); 
    newinput.setAttribute("autocompute","on"); 
    newinput.setAttribute("type", "text"); 
    document.getElementById(divName).appendChild(newbr); 
    document.getElementById(divName).appendChild(newtxt); 
    document.getElementById(divName).appendChild(newinput); 
    counter++; 
    i++; 
    var autocompletew = new google.maps.places.Autocomplete(newinput, ACoptions); 
} 

proof of concept fiddle

コードスニペット：

var counter = 1; 
 
var limit = 10; 
 
var i = 0; 
 
var ACoptions = { 
 
    componentRestrictions: { 
 
    country: "au" 
 
    } 
 
}; 
 

 
function initialize() { 
 

 

 
    var inputs = document.getElementById('start'); 
 
    var autocompletes = new google.maps.places.Autocomplete(inputs, ACoptions); 
 
    var inpute = document.getElementById('end'); 
 
    var autocompletee = new google.maps.places.Autocomplete(inpute, ACoptions); 
 

 
    var waypoints = document.getElementsByName("waypoints[]"); 
 
    for (var i = 0; i < waypoints.length; i++) { 
 
    var inputw = waypoints[i]; 
 
    var autocompletew = new google.maps.places.Autocomplete(inputw, ACoptions); 
 
    } 
 

 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var melbourne = new google.maps.LatLng(-31.953512, 115.857048); 
 
    var myOptions = { 
 
    zoom: 12, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: melbourne 
 
    } 
 

 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    directionsDisplay.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function addInput(divName) { 
 
    if (counter == limit) { 
 
    alert("You have reached the limit of adding " + counter + " inputs"); 
 
    } else { 
 
    var newbr = document.createElement('br'); 
 
    var newtxt = document.createTextNode("" + (counter + 1)); 
 
    var newinput = document.createElement("input"); 
 
    newinput.setAttribute("name", "waypoints[]"); 
 
    newinput.setAttribute("autocompute", "on"); 
 
    newinput.setAttribute("type", "text"); 
 

 
    // newin = (counter + 1) + "<input type=text name=waypoints[] autocomplete=on>"; 
 
    document.getElementById(divName).appendChild(newbr); 
 
    document.getElementById(divName).appendChild(newtxt); 
 
    document.getElementById(divName).appendChild(newinput); 
 
    counter++; 
 
    i++; 
 
    console.log("cntr=" + counter + " i=" + i + " waypoints[].length=" + document.getElementsByName("waypoints[]")); 
 
    // var inputw = waypoints[i]; 
 
    var autocompletew = new google.maps.places.Autocomplete(newinput, ACoptions); 
 

 
    } 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<input id="start" value="Margaret River, AU" /> 
 
<input id="end" value="Perth, AU" /> 
 
<div id="dynamicInput"> 
 
    <br>1 
 
    <input type="text" name="waypoints[]" autocomplete="on"> 
 
</div> 
 
<input type="button" value="Another Delivery" onClick="addInput('dynamicInput');"> 
 
<div id="map_canvas"></div>