javascript - how to get the coordinates of google maps marker and store it in textbox or label using asp.net c# -
i'm trying marker's coordinates , store latitude , longitude of marker 2 separate labels. there possible way of getting coordinates , setting labels display them? thank you.
here's code tried use doesn't post coordinates
<asp:label id="lbllongitude" runat="server" text="longitude: "></asp:label> <asp:label id="lbllong" runat="server" text="label"></asp:label> <asp:label id="lbllatitude" runat="server" text="latitude: "></asp:label> <asp:label id="lbllat" runat="server" text="label"></asp:label> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasybxs9w71w5ggrizwme0rlz7xs69_dezp6i"></script> <script type="text/javascript"> function updatelatposition(latlng) { var lat = document.getelementbyid('hiddenlat'); hiddenlat.value = event.latlng.lat(); } function updatelongposition(latlng) { document.getelementbyid('hiddenlong').innerhtml = event.latlng.lng(); } function initialize() { var latlng = new google.maps.latlng(14.581, 120.976); var map = new google.maps.map(document.getelementbyid('map-canvas'), { zoom: 12, center: latlng, maptypeid: google.maps.maptypeid.roadmap }); var marker = new google.maps.marker({ position: latlng, title: 'landmark coordinates', map: map, draggable: true }); google.maps.event.addlistener(marker, 'drag', function () { updatelatposition(marker.getposition()); updatelongposition(marker.getposition()); }); google.maps.event.addlistener(marker, 'dragend', function (event) { updatelatposition(marker.getposition()); updatelongposition(marker.getposition()); }); } google.maps.event.adddomlistener(window, 'load', initialize); </script>
here's codebehind:
lbllat.text = hiddenlat.value.tostring(); lbllong.text = hiddenlong.value.tostring();
thanks, lanz bituin
you're going have use javascript / jquery this.
the code in codebehind (ex. lbllat.text = hiddenlat.value.tostring();
) runs on server, web page gets assembled , subsequently served client.
once page on browser, have use javascript / jquery manipulate page (ex. set values on labels).
if latitude label has id of 'hiddenlat', , if have jquery, can use set value on label:
edit
if not have jquery, either download or reference cdn:
<!-- place before other <script> tags --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
i'm not familiar google maps api, try replacing updatelatposition function this:
function updatelatposition(latlng) { var newlatvalue = latlng.lat(); // latitude value latlng object console.log(newlatvalue); // sanity check $('#hiddenlat').text(newlatvalue ); // set label value, assuming label has id of 'hiddenlat' }
and updatelngposition function.
function updatelngposition(latlng) { var newlngvalue = latlng.lng(); // longitude value latlng object console.log(newlngvalue); // sanity check $('#hiddenlng').text(newlngvalue); // set label value, assuming label has id of 'hiddenlng' }
Comments
Post a Comment