検索ボックスから緯度と経度を取得

Question

これについては多くのスレッドで議論していますが、私のコードはまだ動作しません。 Googleの場所であるsearchBox APIを使用しています。

マイコード：

function initMap(){ 
      var map = new google.maps.Map(document.getElementById('peta'), { 
       center: {lat: -34.397, lng: 150.644}, 
       zoom: 16 
      }); 
      var infoWindow = new google.maps.InfoWindow({map: map}); 

      // Try HTML5 geolocation. 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function(position) { 
        var pos = { 
         lat: position.coords.latitude, 
         lng: position.coords.longitude 
        }; 

        infoWindow.setPosition(pos); 
        infoWindow.setContent('Your Location.'); 
        map.setCenter(pos); 
       }, function() { 
        handleLocationError(true, infoWindow, map.getCenter()); 
       }); 
      } else { 
       // Browser doesn't support Geolocation 
       handleLocationError(false, infoWindow, map.getCenter()); 
      } 

      var input = document.getElementById('alamat'); 
      var searchBox = new google.maps.places.SearchBox(input); 

      // Bias the SearchBox results towards current map's viewport. 
      map.addListener('bounds_changed', function() { 
       searchBox.setBounds(map.getBounds()); 
      }); 
      var markers = []; 
      // Listen for the event fired when the user selects a prediction and retrieve 
      // more details for that place. 
      searchBox.addListener('places_changed', function() { 
       var places = searchBox.getPlaces(); 

       if (places.length == 0) { 
        return; 
       } 

       // Clear out the old markers. 
       markers.forEach(function(marker) { 
        marker.setMap(null); 
       }); 
       markers = []; 

       // For each place, get the icon, name and location. 
       var bounds = new google.maps.LatLngBounds(); 
       places.forEach(function(place) { 
        var icon = { 
         url: place.icon, 
         size: new google.maps.Size(71, 71), 
         origin: new google.maps.Point(0, 0), 
         anchor: new google.maps.Point(17, 34), 
         scaledSize: new google.maps.Size(25, 25) 
        }; 

        // Create a marker for each place. 
        markers.push(new google.maps.Marker({ 
         map: map, 
         icon: icon, 
         title: place.name, 
         position: place.geometry.location 

        })); 

        if (place.geometry.viewport) { 
         // Only geocodes have viewport. 
         bounds.union(place.geometry.viewport); 
        } else { 
         bounds.extend(place.geometry.location); 
        } 
       }); 
       map.fitBounds(bounds); 
       document.getElementById('x').innerHTML(places.geometry.location.lat()); 
    }); 
} 

リンクスクリプト：

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

は、HTML：

<div id="peta" style="width:500px;height:380px;"></div> 
<input type="text" id="x" readonly="readonly" name="x"> 

私は私のテキストボックスにdocument.getElementByIdを置くが、それはまだ許容範囲を示していません。私はこのコードをどこに置くべきですか？
他のスレッド：
var location= places.geometry.location;
var lat = location.lat();
でも、それは問題ではありません。私はこの質問を繰り返すとすみません。ありがとうございました。

Answer 1

要素#xは入力テキストボックスですか？

そうしよう

：入力テキストボックスの値に緯度を追加します

document.getElementById('x').value = places.geometry.location.lat(); 

。

これは達成しようとしていることですか？

Answer 2

私はこの問題を解決しました。

@Dammeul iはplaces.forEach(function (place)) の内側 document.getElementById('x').value = place.geometry.location.lat();

を置き、言ったように、これは便利願っています。