Google지도에서 마커 좌표 가져 오기

Question

Google지도에서 두 개의 마커의 위도와 경도를 일부 텍스트 상자로 가져 오려고합니다.

google.maps.event.addListener(marker, 'dragend', function (event) { 
document.getElementById("latbox").value = this.getPosition().lat(); 
document.getElementById("lngbox").value = this.getPosition().lng(); 
}); 

및

var lat = marker.getPosition().lat(); 
var lng = marker.getPosition().lng(); 

하지만이 내 텍스트 상자가 아무것도 채워하지 않습니다 내가 사용하는 것이 좋습니다 몇 가지 가이드를 따랐다.

구글 맵 코드 (키를 흐리게하지만, 내가지도에 액세스 할 수 있기 때문에 그것을 잘 작동) :

<div class="content"> 
<div class="map" id="map"></div> 
<script> 
function initMap() { 
var cpe = {lat: -20.269401 , lng: 57.497840}; 
var pl = {lat: -20.187042 , lng: 57.498377}; 
var map = new google.maps.Map(document.getElementById('map'), { 
zoom: 11, 
center: cpe 
}); 
var marker = new google.maps.Marker({ 
position: cpe, 
map:map, 
draggable:true, 
label: "P" 


}); 

ar infowindow = new google.maps.InfoWindow({ 
content: "Pickup Point" 
}); 

marker.addListener('mouseover', function() { 
infowindow.open(map, marker); 
}); 

var marker2 = new google.maps.Marker({ 
position: pl, 
map:map, 
draggable:true, 
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' 

}); 


var infowindow2 = new google.maps.InfoWindow({ 
content: "Drop-Off Point" 
}); 



marker2.addListener('mouseover', function() { 
infowindow2.open(map, marker2); 
}); 
} 

google.maps.event.addListener(marker, 'dragend', function (event) { 
document.getElementById("fromlat").value = this.getPosition().lat(); 
document.getElementById("fromlng").value = this.getPosition().lng(); 
}); 

google.maps.event.addListener(marker2, 'dragend', function (event) { 
document.getElementById("tolat").value = this.getPosition().lat(); 
document.getElementById("tolng").value = this.getPosition().lng(); 
}); 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=*****&callback=initMap"> 
</script> 

</div> 

텍스트 상자 :

enter code here 
<div class="row"> 
<div class="col-sm-3"> 
<fieldset> 
<input type="text" id="fromlat" name="fromlat" placeholder="Pickup Latitutde(Auto)"/> 
</fieldset> 
<fieldset> 
<input type="text" id="fromlng" name="fromlng" placeholder="Pickup Longitude(Auto)"/> 
</fieldset> 
</div> 
<div class="col-sm-3"> 
<fieldset> 
<input type="text" id="tolat" name="tolat" placeholder="Destination Latitude(Auto)"/> 
</fieldset> 
<fieldset> 
<input type="text" id="tolng" name="tolng" placeholder="Destination Longitude(Auto)"/> 
</fieldset> 
</div> 

Answer 1

방금 ​​만 이벤트 함수를 정의 할 필요를 initMap() 함수 아래 다음은 스크립트 코드입니다. 친절하게 리뷰

<script> 
var map; 
function initMap() { 
var cpe = {lat: -20.269401 , lng: 57.497840}; 
var pl = {lat: -20.187042 , lng: 57.498377}; 
map = new google.maps.Map(document.getElementById('map'), { 
zoom: 11, 
center: cpe 
}); 
var marker = new google.maps.Marker({ 
position: cpe, 
map:map, 
draggable:true, 
label: "P" 


}); 
var infowindow = new google.maps.InfoWindow({ 
content: "Pickup Point" 
}); 

marker.addListener('mouseover', function() { 
infowindow.open(map, marker); 
}); 

var marker2 = new google.maps.Marker({ 
position: pl, 
map:map, 
draggable:true, 
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' 

}); 


var infowindow2 = new google.maps.InfoWindow({ 
content: "Drop-Off Point" 
}); 



marker2.addListener('mouseover', function() { 
infowindow2.open(map, marker2); 
}); 

google.maps.event.addDomListener(marker, 'dragend', function (event) { 
document.getElementById("fromlat").value = this.getPosition().lat(); 
document.getElementById("fromlng").value = this.getPosition().lng(); 
}); 

google.maps.event.addDomListener(marker2, 'drag', function (event) { 
document.getElementById("tolat").value = this.getPosition().lat(); 
document.getElementById("tolng").value = this.getPosition().lng(); 
}); 


} 
</script>