google maps automatische Vervollständigung mit dynamischen Arrays

Question

So habe ich dynamische Texteingaben, die ich brauche, um es Zugriff auf Google Maps (Orte) Autocomplete API zu geben.

Die "Start", "Ende" und 1. "Wegpunkt" (nicht dynamisch) funktioniert gut, aber nach 4 Stunden habe ich immer noch kämpfen, um meine dynamischen Texteingaben zur automatischen Vervollständigung zu bekommen. Und kann nichts finden, was der Antwort auf Google ähnelt. Diese

ist das, was ich habe, so weit: 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); 

    } 
} 

Ich bin ziemlich tüchtig mit PHP aber ich bin immer noch sehr viel zu lernen Javascript.

Answer 1

dynamisch den Inhalt erstellen, dann, dass die Referenz unter Verwendung funktioniert für mich:

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

Code-Schnipsel:

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>