좌표를 개별적으로 저장하고 변경하는 방법 - Google Maps API

Question

마커를 만들고 HTML 목록에 좌표를 저장할 수있는 프로그램을 만들려고합니다. 내 문제는 HTML 목록과 마커가 서로 연결되어 있지 않아 마커를지도의 다른 위치로 드래그하면 표시된 좌표가 변경되지 않는다는 것입니다.

이 그것이 ID를 확인하지 않기 때문에 나는이 작동하지 않습니다 알고 구글지도 API

의 "마커 스크립트"입니다. 보시다시피 마커에 대한 ID (번호)가 만들어지며이 ID는 동일한 번호/ID를 사용하여 HTML 목록에 '링크'하는 데 사용될 수 있습니다. 마커를 드래그하면 해당 목록 항목에 새 좌표가 표시됩니다. 나는 어떻게 그렇게해야하는지 알지 못했습니다.

var currentId = 0; 
var uniqueId = function() { 
    return ++currentId; 
}; 
var markers = {}; 
function placeMarker(location) { 
    var id = uniqueId(); 
    var elements = document.getElementsByTagName("li"); 
    var marker = new google.maps.Marker({ 
     id : id, 
     position : location, 
     map : map, 
     draggable : true, 
     animation : google.maps.Animation.DROP 
    }); 
    document.getElementById('checkpoint-textbox').value = id; 
    document.getElementById('checkpoint-textbox').setAttribute("dataid", id--); 
    document.getElementById('checkpoint-textbox').value = id; 
    google.maps.event.addListener(marker, "dragend", function(event) { 

     //I need the code here I think, to specify which list is modified by the dragged marker. 

     document.getElementById("coords").innerHTML = 'Coordinates: ' 
      + event.latLng.lat() + ', ' + event.latLng.lng(); 

     } 
    }); 
} 

다음은 목록입니다.

다른 스크립트로 생성되지만 중요하지는 않습니다. 문제는 기존 좌표가 어떻게 바뀌기 때문입니다.

<ol> 
    <li id="coords" dataid="0">Coordinates: 20.000, 20.000</li> 
    <li id="coords" dataid="1">Coordinates: 30.000, 30.000</li> 
</ol> 

현재로서는 분명히 위쪽 만 변경됩니다.

Answer 1

ID는 고유해야하며 각 <li/>에 대해 동일한 ID를 사용해야합니다. 브라우저에 따라 항상 첫 번째 또는 마지막 <li/>이 선택됩니다.

는 요소에게 고유 ID의의를 부여하거나 늦은 대답을 자신의 dataid -attribute

google.maps.event.addListener(marker, "dragend", function(event) { 

    document.querySelector('ol li[dataid="'+this.get('id')+'"]').innerHTML = 
    'Coordinates: ' + event.latLng.lat() + ', ' + event.latLng.lng(); 

});