<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
<b id="detect"></b>
<script type="text/javascript">
	navigator.geolocation.getCurrentPosition(success, error);
	function success(position) {
		$.ajax({
			 type: "GET",
		url: 'https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat='+position.coords.latitude+'&lon='+position.coords.longitude,
			 data: {},
			 success: function(response){
				 if(response.address.city){
					 $("#detect").html(response.address.city);
				 }else{
					$("#detect").html(response.address.state_district); 
				 }
			 }
			 });
	}
	function error(err) {
		console.log(err)
	}
</script>
</body>
</html>