Google Maps Geolocation APIを使用して、ユーザーの現在地にマーカーを配置するマップがあります。しかし、ユーザーが名前を検索して、ユーザー入力に最も近い場所の最初の結果で別のマーカー(現在の場所のマーカーに加えて)を返すこともできるようにしたい。 (Googleマップのapiは、最も近い場所の配列を返します)。ここで google maps apiを使用してnode.jsのボタンをクリックしてユーザー入力を取得するにはどうすればよいですか?
は、検索バーのためのHTMLで、送信ボタン:<form>
<p> Enter item here:
<input name = 'location1' id = "location2"/>
</p>
<button type = 'submit' id = "submitButton" ><center> Submit</center>
</button>
</form>
そしてここでは、マップとある機能(getStoreLocation)のための機能が含まれている(EJS中)のjavascriptの一部であります名前
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var marker = new google.maps.Marker({
position: pos,
map: map
});
map.setCenter(pos);
document.getElementById('submitButton').onclick = function() {getStoreLocation()}
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn’t support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function getStoreLocation(){
var input = document.getElementById('location2').value
console.log(input)
var apiKey = 'AIzaSyDUWTdknyhqy6iOYA4y8zbR6FJN_tamIaA'
var url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${pos.lat},${pos.lng}&radius=500&keyword=${input}&key=${apiKey}`
fetch(url)
.then(function(data){
return data.json()
})
.then(function(json){
console.log(json)
var latitudeOfInput = json.results[0].geometry.location.lat
var longitudeOfInput = json.results[0].geometry.location.lng
var pos2 = {
lat: latitudeOfInput,
lng: longitudeOfInput
};
console.log(pos2)
var marker2 = new google.maps.Marker({
position: pos2,
map: map
});
})
}
しかし、たとえI入力後に、送信ボタンを押して、ページを現在の位置に一つだけのマーカーを持つマップを返し、ない:submitボタンがクリックされた後、ユーザー入力を取得することになって2番目のマーカーを返しません。誰でもこれを解決する方法や私が間違っていることを知っていますか?