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

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -