Javascript-谷歌地图-自动填充

我有一个表格，我正在整理，我试图让它自动填充我的领域。我已经成功地完成了95%，但是，我很难将横向/纵向跳线自动填充到相应的表单字段中

这是我的HTML

            <div class="control-group">
            <label class="control-label">Address *</label>
                <div class="controls">
                    <input value="" placeholder="Enter the customers full address" class="form-control" id="autocomplete" type="text">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">House Number</label>
                <div class="controls">
                    <input value="" class="form-control" id="street_number" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">Street Address</label>
                <div class="controls">                
                    <input value="" class="form-control" id="route" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">City</label>
                <div class="controls">
                    <input value="" class="form-control" id="locality" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">State</label>
                <div class="controls">
                    <input value="" class="form-control" id="administrative_area_level_1" disabled="true">
                </div>
        </div>      
        <div class="control-group">
            <label class="control-label">Zipcode</label>
                <div class="controls">
                    <input value="" class="form-control" id="postal_code" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">Country</label>
                <div class="controls">
                    <input value="" class="form-control" id="country" disabled="true">  
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">Lat</label>
                <div class="controls">
                    <input value="" class="form-control" id="LatLngBounds" disabled="true">
                </div>
        </div>
        <div class="control-group">
            <label class="control-label">Long</label>
                <div class="controls">
                    <input value="" class="form-control" id="LatLngBounds" disabled="true">
                </div>
        </div> 

地址*
门牌号
街道地址
城市
陈述
Zipcode
国家
拉特
长的

这是我的Javascript

    var placeSearch, autocomplete;
// Need to add Lat / Long to populate field.
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name',

    };

function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')),{ types: ['geocode']});
    autocomplete.addListener('place_changed', fillInAddress);
}

    function fillInAddress() {
        var place = autocomplete.getPlace();
            for (var component in componentForm) {
                document.getElementById(component).value = "";
                document.getElementById(component).disabled = true;
            }
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                    if (componentForm[addressType]) {
                        var val = place.address_components[i][componentForm[addressType]];
                        document.getElementById(addressType).value = val;
                    }
            }
    }

var placeSearch，自动完成；
//需要添加Lat/Long以填充字段。
变量组件形式={
街道编号：“短名称”，
路线：'long_name'，
地点：'long_name'，
行政区域级别1:“短名称”，
国家：'long_name'，
邮政编码：“短名称”，
};
函数initAutocomplete（）{
autocomplete=new google.maps.places.autocomplete（（document.getElementById（'autocomplete'）），{types:['geocode']}）；
autocomplete.addListener（'place\u changed'，fillInAddress）；
}
函数fillInAddress（）{
var place=autocomplete.getPlace（）；
for（componentForm中的var组件）{
document.getElementById（组件）.value=“”；
document.getElementById（组件）.disabled=true；
}
对于（变量i=0；i

您的HTML无效。您有两个id为=“LatLngBounds”的元素

您没有任何代码来填充表单中的纬度和经度值

解决这些问题对我来说很有用：

代码片段：

var placeSearch，自动完成；
//需要添加Lat/Long以填充字段。
变量组件形式={
街道编号：“短名称”，
路线：'long_name'，
地点：'long_name'，
行政区域级别1:“短名称”，
国家：'long_name'，
邮政编码：“短名称”，
};
函数initAutocomplete（）{
autocomplete=new google.maps.places.autocomplete（（document.getElementById（'autocomplete'））{
类型：['geocode']
});
autocomplete.addListener（'place\u changed'，fillInAddress）；
}
函数fillInAddress（）{
var place=autocomplete.getPlace（）；
for（componentForm中的var组件）{
document.getElementById（组件）.value=“”；
document.getElementById（组件）.disabled=true；
}
对于（变量i=0；i

地址*
门牌号
街道地址
城市
陈述
Zipcode
国家
拉特
长的

您的HTML无效。您有两个id为=“LatLngBounds”的元素
您没有任何代码来填充表单中的纬度和经度值
解决这些问题对我来说很有用：

代码片段：


var placeSearch，自动完成；
//需要添加Lat/Long以填充字段。
变量组件形式={
街道编号：“短名称”，
路线：'long_name'，
地点：'long_name'，
行政区域级别1:“短名称”，
国家：'long_name'，
邮政编码：“短名称”，
};
函数initAutocomplete（）{
autocomplete=new google.maps.places.autocomplete（（document.getElementById（'autocomplete'））{
类型：['geocode']
});
autocomplete.addListener（'place\u changed'，fillInAddress）；
}
函数fillInAddress（）{
var place=autocomplete.getPlace（）；
for（componentForm中的var组件）{
document.getElementById（组件）.value=“”；
document.getElementById（组件）.disabled=true；
}
对于（变量i=0；i

地址*
门牌号
街道地址