I am developing one webproject and in that project i have requirement that there will be one button there named by auto detect and when ever any one click on that button visitor will get his location popup in this near textbox,i have created it and seen result in console.
autodetect.html:44 {error_message: "This API project is not authorized to use >this API.", results: Array(0), status: "REQUEST_DENIED"}
Following is the code for it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Auto detect location</title>
</head>
<body>
<button onClick="getLocation()">Get Location</button>
<!--output will display here-->
<div id="output" style="margin-top: 20px;"></div>
<div id="output1" style="margin-top: 20px;"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var x = document.getElementById('output');
var y = document.getElementById('output1');
x.innerHTML = "Here is output";
function getLocation() {
//alert('hi getLocation working');
if (navigator.geolocation) {
// x.innerHTML = "Supporting..";
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Sorry your browser not supporting autodetect location.";
}
}
function showPosition(position) {
// x.innerHTML = position.coords.latitude;
// y.innerHTML = position.coords.longitude;
var locAPI = "https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyCY2xZxxjq0U6iVzYJetKi9uJZnmIrnPGs&latlng=" + position.coords.latitude + "," + position.coords.longitude + "&sensor=true";
// x.innerHTML = locAPI;
$.get({
url: locAPI,
success: function(data) {
console.log(data);
}
});
}
</script>
</body>
</html>
how we can get code corrected so that we will det displayed this location of the visitos ?
