は、Googleプレイスは、リスト項目

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>

私はGoogleがテキストフィールドでの作業オートコンプリートを置く得ることができますに新しく生成された入力にオートコンプリートを追加します。

これらのフィールドをliとして生成し、各フィールドにオートコンプリートを含むようにします。ここでは、オートコンプリートの作業なし例です。

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>

ので、生成された入力のidのはplace1、place2など

ある私はに

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

を追加してみましたaddplace関数の定義は、私のjavascriptを無効にするように思われました（マップはもはや表示されなくなりました）。理由は分かりません。私はGoogleがそれをブロックしているとは思わない。たぶん私は構文エラーまたは場所を作成している "+ j +"変数の名前を変更する正しい方法ではない？

生成された各入力フィールドに自動的に場所の自動補完機能を追加していただきありがとうございます。

UPDATE：私はこの質問Google Places Autocomplete doesn't work on dynamically generated input elements に気づき、それを試してみて、ここで適用するために勉強しますが、私はその一例では必要以上に複雑であるかもしれないAJAXや他のものを使用することに注意してください。換言すれば、彼らは回答でhttp://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.jsを参照する。もし私が私の部分的な解決策が少なくとも近づいている/いくつかの微調整で正しいかもしれないことを私は分かっているので、私はjqueryがなくてもいいかもしれません。

Answer 1

私は、これはあなたが探しているものです推測：

1）。idのボタンを追加します。次に、すべてのオートコンプリート入力をラップするには、任意の要素（ここではulとid = "waypoints"）を使用します。

2）。次に、オートコンプリート入力を生成するボタンにclick eventを追加し、id'sを動的に追加します。

3）。は今（ここではul）要素内の入力を作成したすべての人のためのクリックイベントを（もしあれば）を作成id（ここではid = "waypoints"）とが同時にクリックAutcomplete入力に対するautcompleteのインスタンスを作成しました。

スニペット：

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>