Hi nedash,
Here I have created sample that full-fill your requirement.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
document.getElementById("txtCoordinate").value = latitude + ',' + longitude;
var mapOptions = {
center: coords,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var marker;
google.maps.event.addListener(map, 'click', function (e) {
var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
var geocoder = geocoder = new google.maps.Geocoder();
if (marker != null) {
marker.setMap(null);
}
marker = new google.maps.Marker({
position: latlng,
map: map
});
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
//alert("Location: " + results[1].formatted_address + "\r\nLatitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
document.getElementById("txtCoordinate").value = e.latLng.lat() + ',' + e.latLng.lng();
}
}
});
});
});
} else {
alert("Geolocation API is not supported in your browser.");
}
}
</script>
<div id="dvMap" style="width: 400px; height: 400px">
</div>
<br />
<br />
Coordinate :<input name="txtCoordinate" type="text" id="txtCoordinate" /><br />
</div>
</body>
</html>
Demo
Screenshot
