2017-07-20 3 views
0

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番目のマーカーを返しません。誰でもこれを解決する方法や私が間違っていることを知っていますか?

答えて

0

ボタンがページのリフレッシュを引き起こしているため、ボタンのタイプが変更されています。

<button type="button"> 

これで問題が解決しない場合は、ボタンの要素をに変更してください。

<input type="button">