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?