-1

私はHTML/JavaScriptの知識が非常に限られており、自分のウェブサイトにGoogleプレイスのオートコンプリート検索ボックス(マップなし)を実装できました。Google APIのオートコンプリート検索ボックス - HTML/JavaScript

Google Placeオートコンプリートを使用する2つの入力が必要ですが、私が使用している次のコードでは2つの入力フィールドは表示されず、2つ目の入力フィールド(searchTextField2)は表示されません。

誰かがアドバイスを提供してもいいですか、私がこのコードで間違っている正しい方向を指してくれますか?

ご協力いただければ幸いです。

<!DOCTYPE html> 
<html> 
<head> 
<title> </title> 

<style> 
#searchTextField { 
position: absolute; 
box-sizing: border-box; 
z-index: 4; 
height: 40px; 
width: 360px; 
left: 0px; 
top: 0px; 
border: 1px solid rgb(189, 189, 189); 
background-color: rgb(255, 255, 255); 
border-radius: 3px; 
font-family: Roboto; 
font-size: 18px; 
font-weight: 500; 
color: rgb(85, 85, 85); 
padding: 0px 4px; 
transition: border-color 200ms ease, box-shadow 200ms ease; 
box-shadow: none; 
    } 

#searchTextField2 { 
position: absolute; 
box-sizing: border-box; 
z-index: 4; 
height: 40px; 
width: 360px; 
left: 0px; 
top: 0px; 
border: 1px solid rgb(189, 189, 189); 
background-color: rgb(255, 255, 255); 
border-radius: 3px; 
font-family: Roboto; 
font-size: 18px; 
font-weight: 500; 
color: rgb(85, 85, 85); 
padding: 0px 4px; 
transition: border-color 200ms ease, box-shadow 200ms ease; 
box-shadow: none; 
    } 
</style> 

</head> 

<body> 
<input id="searchTextField" type="text" size="50" placeholder="Pick-up Address" tabindex=2><br> 
<input id="searchTextField2" type="text" size="50" placeholder="Destination" tabindex=3> 


<script type="text/javascript"> 
function initMap() { 
var input = document.getElementById('searchTextField'); 
var input = document.getElementById('searchTextField2'); 
var options = { 
    // types: ['(cities)'], 
    componentRestrictions: {country: 'uk'}//UK 
}; 
var autocomplete = new google.maps.places.Autocomplete(input,options); 
} 
</script> 

<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&libraries=places&callback=initMap" async defer></script> 

</body> 
</html> 

答えて

0

あなたの現在のコードでvar input再宣言しています。

function initMap() { 
var input = document.getElementById('searchTextField'); 
var input2 = document.getElementById('searchTextField2'); 
var options = { 
    // types: ['(cities)'], 
    componentRestrictions: {country: 'uk'}//UK 
}; 
var autocomplete = new google.maps.places.Autocomplete(input,options); 
var autocomplete2 = new google.maps.places.Autocomplete(input2,options); 
} 
+0

ありがとうございます。Paul :-) –

関連する問題