google Orte hinzufügen

Question

var start = new google.maps.places.Autocomplete(
 
    (document.getElementById('start')), { 
 
     types: ['geocode'] 
 
    });

<input id="start" placeholder="Where to begin?" type="text" /> 
 

 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

zu neu generierten Eingaben in Listenelemente automatisch vervollständigen kann ich Google die automatische Vervollständigung legt in einem Textfeld zu arbeiten.

Ich möchte eine Schaltfläche, um diese Felder als li generieren und automatische Vervollständigung für jedes Feld enthalten. Hier ist ein Beispiel, ohne die automatische Vervollständigung Arbeits:

document.getElementById('addplace').addEventListener('click', function() { 
 
    addplace(); 
 
    }); 
 

 
var j=1; 
 
function addplace() { 
 
    var node = document.createElement("li"); 
 
    node.innerHTML = "<input id='place" + j +"' placeholder='Pit stop " + j + "' onFocus='geolocate()' type='text' />";    
 
    document.getElementById("waypoints").appendChild(node); 
 
    j++; 
 
}

<input type="submit" id="addplace" value="Add One!"> 
 
<ul id="waypoints"></ul> 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

So sind die IDs der Eingänge erzeugt sind Place1, Place2 usw.

ich versucht, indem

var place"+j+" = new google.maps.places.Autocomplete(
(document.getElementById('place"+j+"')), { 
    types: ['geocode'] 
}); 

in die Definition der Addplace-Funktion, aber es schien zu verursachen, dass mein Javascript deaktiviert wurde (die Karte erschien überhaupt nicht mehr). Nicht sicher warum; Ich denke nicht, dass Google es blockieren würde. Vielleicht mache ich einen Syntaxfehler oder Platz "+ j +" ist keine korrekte Möglichkeit, eine Variable zu benennen?

Vielen Dank für Ihre Hilfe, die Orte automatisch zu jedem generierten Eingabefeld automatisch vervollständigen.

UPDATE: bemerkte ich diese Frage Google Places Autocomplete doesn't work on dynamically generated input elements und wird es hier zu versuchen und anwenden studieren, aber ich merke, Verwendung von Ajax und anderen Dingen, die komplizierter sein könnten, als ich in diesem Beispiel muß. d.h. sie beziehen sich in einer Antwort auf http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js. Wenn ich das ohne jQuery machen könnte, wäre das nett oder vielleicht einfacher oder lehrreicher für mich, da ich meine Teillösung zumindest für nahe halte/mit einigen Verbesserungen korrigieren könnte?

Answer 1

Ich denke, das ist das, was Sie suchen:

1). Schaltfläche mit spezifischen id hinzufügen. Verwenden Sie dann ein beliebiges Element (hier mit id = "waypoints"), um alle Ihre Autocomplete-Eingaben zu umbrechen.

2). Fügen Sie dann click event zur Schaltfläche hinzu, die die Autocomplete-Eingaben mit dynamischem id's generiert.

3). nun ein Click-Ereignis für alle, die (falls vorhanden) erstellt Eingänge innerhalb des Elements (hier ul) mit id(hier id = "waypoints") erstellen und Instanz von autcomplete in Bezug auf geklickt Autcomplete Eingang zur gleichen Zeit erstellen.

Snippet:

var totalAC = 0; 
 
$(document).on('click', "#waypoints input[type=text]",function() { 
 
\t var currentInp = $(this).attr("id"); 
 
\t var placeBox = new google.maps.places.Autocomplete(document.getElementById(currentInp)); 
 
}); 
 

 
$("#newAutocomplete").click(function(){ 
 
\t totalAC = $("#waypoints input").length; 
 
\t totalAC = totalAC + 1; 
 
\t var codeVar = "<li><input id='place" + totalAC + "' placeholder='Where to begin?' type='text' /></li>"; 
 
\t $("#waypoints").append(codeVar); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script> 
 

 
<button id="newAutocomplete">Add One+</button> 
 
<ul id="waypoints"> 
 

 
</ul>