1

I am trying to retrieve latitude and longitude values. When the user clicks on the google map, latitude and longitude values should be displayed in the text boxes.

My code is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sample.aspx.cs" Inherits="sample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show Google Map with Latitude and Longitude in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">

    function initialize() {
        var myLatlng = new google.maps.LatLng(24.18061975930,79.36565089010);
        var myOptions = {
            zoom:7,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("gmap"), myOptions);
        // marker refers to a global variable
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
        // if center changed then update lat and lon document objects
        google.maps.event.addListener(map, 'center_changed', function () {
            var location = map.getCenter();
            document.getElementById("lat").innerHTML = location.lat();

            document.getElementById("lon").innerHTML = location.lng();
            // call function to reposition marker location
            placeMarker(location);
        });
        // if zoom changed, then update document object with new info
        google.maps.event.addListener(map, 'zoom_changed', function () {
            zoomLevel = map.getZoom();
            document.getElementById("zoom_level").innerHTML = zoomLevel;
        });
        // double click on the marker changes zoom level
        google.maps.event.addListener(marker, 'dblclick', function () {
            zoomLevel = map.getZoom() + 1;
            if (zoomLevel == 20) {
                zoomLevel = 10;
            }
            document.getElementById("zoom_level").innerHTML = zoomLevel;
            map.setZoom(zoomLevel);
        });

        function placeMarker(location) {
            var clickedLocation = new google.maps.LatLng(location);
            marker.setPosition(location);
        }
    }
    window.onload = function () { initialize() };
</script>
     <style>
 div#gmap {
        width: 80%;
        height: 500px;
        border:double;
 }
    </style>
</head>

<body>
    <form id="form1" runat="server">
<center>
<!-- MAP HOLDER -->
<div id="gmap"></div>
<!-- REFERENCES -->

lat:
lon:

</center>

    </form>
</body>

</html>

But it not displaying anything. Please tell me where the mistake is?

| improve this question | |
6

In the following lines you are trying to refer to a DOM element that does not exist:

document.getElementById("lat").innerHTML = location.lat();
document.getElementById("lon").innerHTML = location.lng();

So in your HTML you would have to add an element like a div or a span, that you can give an id. I would use a span, so you can stay in the same line without any further work:

lat:<span id='lat'></span>
lon:<span id='lon'></span>

Now your code grabs the element and writes the result into it.

enter image description here


EDIT:
But is that actually what you want to do? Pan the map and display its current coordinates? Or do you want to get the coordinates of your current click?

EDIT 2: (addressing comments):

Here would be your JavaScript (I have omitted what is not necessary to answer the question)

    var map;
        function initialize() {
            var myLatlng = new google.maps.LatLng(24.18061975930,79.36565089010);
            var myOptions = {
                zoom:7,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("gmap"), myOptions);
            // marker refers to a global variable
            marker = new google.maps.Marker({
                position: myLatlng,
                map: map
            });

            google.maps.event.addListener(map, "click", function(event) {
                // get lat/lon of click
                var clickLat = event.latLng.lat();
                var clickLon = event.latLng.lng();

                // show in input box
                document.getElementById("lat").value = clickLat.toFixed(5);
                document.getElementById("lon").value = clickLon.toFixed(5);

                  var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(clickLat,clickLon),
                        map: map
                     });
            });
    }   

    window.onload = function () { initialize() };

And this you would add to your body:

Lat: <input type="text" id='lat'>
Lon: <input type="text" id='lon'>

NOTE that I have truncated the decimals in the window using toFixed(5), as it does not make sense to display too many decimals.

As your next step you should probably remove all existing markers when clicking. You can use this example to implement that.

| improve this answer | |
  • yes i want to get coordinates of current click , and also i want to display the coordinates in textboxes,and also i tried with span but i want that values in textbox.in the above example user has to move the map near marker but for me user has to click on the map there marker has to be displayed and also coordiantes in textbox. plz send me the full code bcoz iam trying from so many days – user46218 Feb 12 '15 at 9:26
  • By textbox you mean this: w3schools.com/tags/tryit.asp?filename=tryhtml_form_submit ? – BritishSteel Feb 12 '15 at 9:31
  • plz see this link latlong.net i want exactly like this – user46218 Feb 12 '15 at 10:32
  • See my edits. This implements the basic functionality you are asking for. You'd have to go ahead and add some things to make it more user-friendly, of course. – BritishSteel Feb 12 '15 at 11:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.