Html 谷歌地图标记在文本框中显示位置，而不是div标记

当前，当拖动地图标记时，位置显示在div标记中，但我想在文本框而不是div中显示它。我想在文本框txtLoc中显示它。它当前显示在div中，即“msg”。我的信息窗口也没有显示

    <asp:TextBox ID="txtLoc" CssClass="form-control" 
     runat="server"   style="margin-left:120px" ></asp:TextBox>&nbsp;
    <button ID="lblFind" runat="server" class="btn btn-info btn-xs">
     Find   location on map</button>
    <br/><br />
     <div id='msg'></div>
     <div id="map" style="height:300px;width:600px"></div>
      </div>



    var geocoder;
    function initMap() {
    geocoder = new google.maps.Geocoder();
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition,  showError);
    } else {
    x=document.getElementById("msg");
    x.innerHTML = "Geolocation is not supported by this browser.";
}

    function showError(error) {
    x=document.getElementById("msg");
    switch (error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed  out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
   }

  }

     function geocodePosition(pos) {
     x=document.getElementById("msg");
     geocoder.geocode({'latLng': pos}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
            x.innerHTML = results[0].formatted_address;

        }
    } else {
        x.innerHTML = "Geocoder non possibile";
    }  
  });

  }

  function showPosition(position) {
  lat = position.coords.latitude;
  lon = position.coords.longitude;
  latlon = new google.maps.LatLng(lat, lon)
  mapholder = document.getElementById('map')

    var myOptions = {
    center: latlon,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    navigationControlOptions:
    { style: google.maps.NavigationControlStyle.SMALL }
  }

   var contentString = 'Drag red marker <br/> to improve geo-location';
   var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
   infowindow.open(map, marker);

   var map = new google.maps.Map(document.getElementById("map"), myOptions);
   var marker = new google.maps.Marker({
    position: latlon,
    map: map,
    title: 'Report refers to this location',
    draggable: true
});


    google.maps.event.addListener(marker, 'dragstart', function (evt) {
    x=document.getElementById("msg"); 
   });

    google.maps.event.addListener(marker, 'drag', function (evt) {
    x=document.getElementById("msg");
   });

    google.maps.event.addListener(marker, 'dragend', function (evt) {
    x=document.getElementById("msg");
   geocodePosition(marker.getPosition());
  });

}

在地图上找到位置



var地理编码器；
函数initMap（）{
geocoder=新的google.maps.geocoder（）；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition，showError）；
}否则{
x=document.getElementById（“msg”）；
x、 innerHTML=“此浏览器不支持地理位置。”；
}
功能错误（错误）{
x=document.getElementById（“msg”）；
开关（错误代码）{
案例错误。权限被拒绝：
x、 innerHTML=“用户拒绝了地理位置请求。”
打破
案例错误。位置不可用：
x、 innerHTML=“位置信息不可用。”
打破
大小写错误。超时：
x、 innerHTML=“获取用户位置的请求超时。”
打破
案例错误。未知错误：
x、 innerHTML=“发生未知错误。”
打破
}
}
}
功能地理编码定位（pos）{
x=document.getElementById（“msg”）；
geocoder.geocode（{'latLng'：pos}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
如果（结果[0]）{
x、 innerHTML=结果[0]。格式化的\u地址；
}
}否则{
x、 innerHTML=“地理编码器不可能”；
}  
});
}
功能显示位置（位置）{
纬度=位置坐标纬度；
lon=位置坐标经度；
latlon=新的google.maps.LatLng（lat，lon）
mapholder=document.getElementById（'map'））
变量myOptions={
中心：拉特伦，
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
导航控制选项：
{style:google.maps.NavigationControlStyle.SMALL}
}
var contentString='拖动红色标记以改善地理位置'；
var infowindow=new google.maps.infowindow({
内容：contentString
});
信息窗口。打开（地图、标记）；
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
var marker=new google.maps.marker({
职位：拉特隆，
地图：地图，
标题：“报告引用此位置”，
德拉格布尔：是的
});
google.maps.event.addListener（标记'dragstart'，函数（evt）{
x=document.getElementById（“msg”）；
});
google.maps.event.addListener（标记'drag'，函数（evt）{
x=document.getElementById（“msg”）；
});
google.maps.event.addListener（标记'dragend'，函数（evt）{
x=document.getElementById（“msg”）；
geocodePosition（marker.getPosition（））；
});
}

这是代码的工作版本，带有文本框（也用于显示反向地理代码结果） 查看geocodePosition的新版本（不再需要函数addAddress（））

试验
var地理编码器；
函数initMap（）{
geocoder=新的google.maps.geocoder（）；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition，showError）；
}否则{
x=document.getElementById（“msg”）；
x、 innerHTML=“此浏览器不支持地理位置。”；
}
功能错误（错误）{
x=document.getElementById（“msg”）；
开关（错误代码）{
案例错误。权限被拒绝：
x、 innerHTML=“用户拒绝了地理位置请求。”
打破
案例错误。位置不可用：
x、 innerHTML=“位置信息不可用。”
打破
大小写错误。超时：
x、 innerHTML=“获取用户位置的请求超时。”
打破
案例错误。未知错误：
x、 innerHTML=“发生未知错误。”
打破
}
}
//更新标记位置（latlon）；
//地理共沉积（latlon）；
}
功能地理编码定位（pos）{
x=document.getElementById（“msg”）；
geocoder.geocode（{'latLng'：pos}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
如果（结果[0]）{
x、 innerHTML=结果[0]。格式化的\u地址；
y=document.getElementById（“txtLoc”）；
y、 值=结果[0]。格式化的\u地址；
}
}否则{
x、 innerHTML=“地理编码器不可能”；
}  
});
}
功能显示位置（位置）{
纬度=位置坐标纬度；
lon=位置坐标经度；
latlon=新的google.maps.LatLng（lat，lon）
mapholder=document.getElementById（'map'））
变量myOptions={
中心：拉特伦，
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
导航控制选项：
{style:google.maps.NavigationControlStyle.SMALL}
}
var contentString='拖动红色标记以改善地理位置'；
var infowindow=new google.maps.infowindow({
内容：contentString
});
信息窗口。打开（地图、标记）；
var map=new google.maps.map（document.getElementById（“map”），myOptions）；
var marker=new google.maps.marker({
职位：拉特隆，
地图：地图，
标题：“报告引用此位置”，
德拉格布尔：是的
});
//添加拖动事件侦听器。
google.maps.event.addListener（标记'dragstart'，函数（evt）{
x=document.getElementById（“msg”）；
x、 innerHTML='拖动…标记已删除：当前
<body >
 <!--  div id="map" style="width: 1800px; height: 1300px"></div-->
<input id="txtLoc" type="text" name="testname"  style="width: 400px;"><br>
<div id='msg'>Test</div>
<div id="map"></div>
<script type="text/javascript">



    var geocoder;

    function initMap() {
        geocoder = new google.maps.Geocoder();
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,  showError);
        } else {
            x=document.getElementById("msg");
            x.innerHTML = "Geolocation is not supported by this browser.";
        }

        function showError(error) {
            x=document.getElementById("msg");
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "The request to get user location timed  out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "An unknown error occurred."
                    break;
            }
        }



        //updateMarkerPosition(latlon);
        //geocodePosition(latlon);
    }

     function geocodePosition(pos) {
        x=document.getElementById("msg");
        geocoder.geocode({'latLng': pos}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
               x.innerHTML = results[0].formatted_address;
               y  = document.getElementById("txtLoc");
               y.value =  results[0].formatted_address;


              }
          } else {
            x.innerHTML = "Geocoder non possibile";
          }  
        });

    }

    function showPosition(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        latlon = new google.maps.LatLng(lat, lon)
        mapholder = document.getElementById('map')

        var myOptions = {
            center: latlon,
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            navigationControlOptions:
            { style: google.maps.NavigationControlStyle.SMALL }
        }

        var contentString = 'Drag red marker <br/> to improve geo-location';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        infowindow.open(map, marker);

        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
            position: latlon,
            map: map,
            title: 'Report refers to this location',
            draggable: true
        });


        // Add dragging event listeners.
        google.maps.event.addListener(marker, 'dragstart', function (evt) {
             x=document.getElementById("msg");
             x.innerHTML = '<p>Dragging ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
        });

        google.maps.event.addListener(marker, 'drag', function (evt) {
             x=document.getElementById("msg");
             x.innerHTML = '<p>Dragging ... again .... Marker position: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
        });

        google.maps.event.addListener(marker, 'dragend', function (evt) {
            x=document.getElementById("msg");
            x.innerHTML =  '<p>Drag .. ended ... Marker dropped: Current Lat: ' + evt.latLng.lat() + ' Current Lng: ' + evt.latLng.lng() + '</p>';
            geocodePosition(marker.getPosition());
        });

    }


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

  </body>