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>

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>

• javascript
• asp
• google-maps

• 1 Need more of the code to figure it out – TGH Commented Oct 4, 2013 at 14:12

2 Answers 2

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

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

<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./ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maps.googleapis./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>

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