I have modified your code and now you can save the Latitude and Longitude Values to database using hidden fields
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("<%=hfLat.ClientID %>").value = latitude;
document.getElementById("<%=hfLon.ClientID %>").value = longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
});
} else {
alert("Geolocation API is not supported in your browser.");
}
</script>
<style type="text/css">
#mapContainer
{
height: 500px;
width: 800px;
border: 10px solid #eaeaea;
}
</style>
<div id="mapContainer">
</div>
<asp:HiddenField ID="hfLat" runat="server" />
<asp:HiddenField ID="hfLon" runat="server" />
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
</form>
</body>
</html>
Code
protected void btnSave_Click(object sender, EventArgs e)
{
string latitude = hfLat.Value;
string longitude = hfLon.Value;
//Save to database here
}
