how to get the coordinates of google maps marker and store it in textbox or label using asp.net c#

Question

I'm trying to get the marker's coordinates and store the latitude and longitude of the marker to two separate labels. Is there a possible way of getting the coordinates and setting the labels to display them? Thank you.

Here's the code I tried to use but it doesn't post the 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 the codebehind:

lblLat.Text = HiddenLat.Value.ToString();
lblLong.Text = HiddenLong.Value.ToString();

Thanks, Lanz Bituin

Answer 1

You're going to have to use javascript / jquery to do this.

The code in the codebehind (ex. lblLat.Text = HiddenLat.Value.ToString(); ) runs on the server, where the web page gets assembled and is subsequently served to the client.

Once the page is on the browser, you have to use javascript / jquery to manipulate the page (ex. set values on labels).

If the latitude label has an id of 'HiddenLat', and if you have jquery, you can use this to set the value on the label:

EDIT

If you do not have jquery, either download it or reference it from a cdn:

<!-- Place this before any 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 that familiar with the Google Maps API, but try replacing your updateLatPosition function with this:

function updateLatPosition(latLng) {
    var newLatValue = latLng.lat(); // get the latitude value from the latLng object
    console.log(newLatValue); // sanity check
    $('#HiddenLat').text(newLatValue ); // set the label value, assuming that the label has an id of 'HiddenLat'
}

And similarly for the updateLngPosition function.

function updateLngPosition(latLng) {
    var newLngValue = latLng.lng(); // get the longitude value from the latLng object
    console.log(newLngValue); // sanity check
    $('#HiddenLng').text(newLngValue); // set the label value, assuming that the label has an id of 'HiddenLng'
}