Save Google Map Marker's new latitude and longitude to textboxes after drag-and-drop

Question

I have been struggling with this for hours, my problem is:

I have created a google map in my asp page, and I want to display the lat and lng in the Textbox by clicking on the map.

Here is the code.

Javascript:

    var map;
    var marker = null;
    var latitudeTextBox = $("#<%= LatitudeTextBox.ClientID %>");
    var longitudeTextBox = $("#<%= LongitudeTextBox.ClientID %>");

function initialize() {

    var myCenter = new google.maps.LatLng(-33, 150.75);


    var mapOption =
    {
        center: myCenter,
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapOption);

    google.maps.event.addListener(map, 'click', function (event) {
        createNewMarker(event.LatLng,map);
    });

    google.maps.event.addDomListener(window, 'load', initialize);
}

function createNewMarker(location,map) {
    if (marker != null)
        marker.setMap(null);
    marker = new google.maps.Marker({
        position: location,
        animation: google.maps.Animation.BOUNCE,
        map: map,
    });

    var infowindow = new google.maps.InfoWindow({
        content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
    });

    infowindow.open(map, marker);

    latitudeTextBox.val(location.lat());
    longitudeTextBox.val(location.lng());
}

asp:

<asp:TextBox id="LatitudeBox" runat="server" text=""></asp:TextBox>

<asp:TextBox id="LongitudeBox" runat="server" text=""></asp:TextBox>

Need more of the code to figure it out – TGH Oct 04 '13 at 14:12 — TGH, Oct 04 '13 at 14:12

score 2 · Answer 1 · edited May 23 '17 at 10:26

2

google.maps.event.addListener(marker, "drag", function(){
    document.getElementById("LatitudeBox").value=marker.getPosition().lat();
    document.getElementById("LongiitudeBox").value=marker.getPosition().lng();
});

Will get the latitude and longitude when marker-drag. You can try with the event that you need.

Please refer to Here for more on this

edited May 23 '17 at 10:26

Community

1
1

answered Oct 04 '13 at 14:19

Marikkani Chelladurai

1,430
1
13
23

This also does not account for generated client IDs. – James Johnson Oct 04 '13 at 15:49

Win · Accepted Answer · 2013-10-04T17:11:37.017

Here is the demo for Google Map API 3 in http://jsfiddle.net/Blunk/x8dSP/8/.

Note: I use jQuery(document).ready in jsfiddle to initialize the map.

enter image description here

<table>
    <tr>
        <td>Latitude:</td>
        <td>Longitude:</td>
    </tr>
    <tr>
        <td>
            <asp:TextBox runat="server" ID="LatitudeTextBox" Text="33.976222" /></td>
        <td>
            <asp:TextBox runat="server" ID="LongitudeTextBox" Text="-118.281698" /></td>
    </tr>
</table>
<div id="map_canvas" style="width: 300px; height: 300px">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">

    var map;
    var marker;
    var latitudeTextBox = $("#<%= LatitudeTextBox.ClientID %>");
    var longitudeTextBox = $("#<%= LongitudeTextBox.ClientID %>");

    function initialize() {

        var centerLatlng = new google.maps.LatLng(latitudeTextBox.val(), longitudeTextBox.val());

        var mapOptions = {
            zoom: 10,
            center: centerLatlng,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DEFAULT },
            navigationControl: true,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT }
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        marker = new google.maps.Marker({
            draggable: true,
            map: map,
            position: centerLatlng
        });

        google.maps.event.addListener(marker, 'dragend', function() {
            var curLatLng = marker.getPosition();
            latitudeTextBox.val(curLatLng.lat());
            longitudeTextBox.val(curLatLng.lng());
        });

        google.maps.event.trigger(marker, "click");

    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>

i tried to run the code at jsfiddle, it worked, but it didnt work when i run it through my visual studio. — RunningDonkey, Oct 07 '13 at 12:08
Did you make it work? If not, create a new ASPX page (without master page), and copy the above code for test. I've already tested the above code. — Win, Oct 07 '13 at 15:32
no , it didn't work,i guess the problem was click event,when i replace the 'event' parram with 'myCenter', it will display the marker, but what i expected is wherever i click on the map . a marker should dropped and a infowindow shows. please help me out — RunningDonkey, Oct 07 '13 at 16:04
well, i got the marker done . but now new problem comes , i can not update the current latlng to my textbox. please help if possible — RunningDonkey, Oct 07 '13 at 17:12
@RunningDonkey Your question becomes different from original post. SO is not design to chat back and forward like forum. Please kindly create a new question with the code, and explain where you get stuck. — Win, Oct 07 '13 at 17:32

Save Google Map Marker's new latitude and longitude to textboxes after drag-and-drop

2 Answers2