"Permission Denied" when trying to fetch location - google-maps-api-3

Question

I'm getting "Permission Denied" all the time when I'm trying to fetch my location with this code:
function initialize() {
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
if(geo_position_js.init()) {
var waiting_time = $('#getting-position').html('Försöker att hitta din aktuella position. Var god vänta...');
t = setTimeout(function() {
waiting_time.html('Det tar längre tid att hitta din position, än vad det egentligen borde göra.<br><br><b>Tips</b><br>GPS-mottagaren har lättare att hitta dig om du är utomhus. Täta moln som till exempel vid ett åskoväder, kan göra det svårare för satelliterna att hämta din position.');
}, 60000);
geo_position_js.getCurrentPosition(show_position, function() {
clearTimeout(t);
$('#getting-position').html('<b>Ett fel uppstod</b><br>Din position kunde inte hittas. Se till att vara utomhus för bästa möjliga resultat och försök igen.');
}, {
enableHighAccuracy: true
});
} else {
$('#getting-position').html('<b>Ett fel uppstod</b><br>Det verkar som att din webbläsare inte tillåter GPS-positionering.');
}
}
function show_position(p) {
$('.map-fullsize').show();
$('#weather-map').show();
$('#weather-data').show();
$('#getting-position').hide();
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showError, function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var speed = position.coords.speed;
var altitude = position.coords.altitude;
var heading = position.coords.heading;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: coords,
streetViewControl: false,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById('weather-map'), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map
});
var circle = new google.maps.Circle({
center: coords,
radius: accuracy,
map: map,
fillColor: '#3333ff',
fillOpacity: 0.4,
strokeColor: '#3333ff',
strokeOpacity: 0.8,
strokeWeight: 1
});
map.setCenter(coords);
if(accuracy > 30) {
map.fitBounds(circle.getBounds());
} else {
map.setZoom(14);
}
$('#weather-data').load('jquery-fetch/fetch-weatherdata.php?coor=' + latitude.toFixed(6).replace(/\./, '') + ',' + longitude.toFixed(6).replace(/\./, '') + '&coordinates=' + latitude.toFixed(6) + ',' + longitude.toFixed(6) + '&accuracy=' + accuracy + '&speed=' + speed + '&altitude=' + altitude + '&heading=' + heading);
});
} else {
alert('Geolocation API stöds inte i din webbläsare');
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
$('#permission-denied').show();
break;
case error.POSITION_UNAVAILABLE:
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
$('#position-unavailable').show();
break;
case error.TIMEOUT:
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
$('#timeout').show();
break;
case error.UNKNOWN_ERROR:
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
$('#unknown-error').show();
break;
}
}
}
$(document).ready(function() {
initialize();
});
I can't find anything wrong with this code and the funny thing with this is that the code is getting my GPS location before I'm getting "Permission Denied". This problem is an "follow-up" to my previous question. How can I fix my problem?
Thanks in advance.

Answer 1

You are using
navigator.geolocation.getCurrentPosition(showError, function(position) {...})
The specification for getCurrentPosition shows the functions in the other order. The reason for this is that only the success callback is mandatory; it must come first. If a second argument is supplied, it's the error callback. A third argument is an options object.

Answer 2

just two things;
i) to test this I simplified your code a little, fixed some small problems and removed the dependancy on geo.js.
ii) The geolocation will only work when the site is hosted on an external http:// server
<html>
<body>
<div id='map' class='map-fullsize'></div>
<div id='weather-map'></div>
<div id='weather-data'></div>
<div id='getting-position'></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type='text/javascript'>
function initialize() {
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
var waiting_time = $('#getting-position').html('Försöker att hitta din aktuella position. Var god vänta...');
get_position();
t = setTimeout(function () {
$('#getting-position').html('Det tar längre tid att hitta din position, än vad det egentligen borde göra.<br><br><b>Tips</b><br>GPS-mottagaren har lättare att hitta dig om du är utomhus. Täta moln som till exempel vid ett åskoväder, kan göra det svårare för satelliterna att hämta din position.');
}, 60000);
}
function get_position() {
$('#getting-position').html("get_position()");
$('.map-fullsize').show();
$('#weather-map').show();
$('#weather-data').show();
// $('#getting-position').hide();
if(navigator.geolocation) {
$('#getting-position').html("navigator.geolocation");
navigator.geolocation.getCurrentPosition(showPosition, showError, { enableHighAccuracy: true });
} else {
alert('Geolocation API stöds inte i din webbläsare');
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var speed = position.coords.speed;
var altitude = position.coords.altitude;
var heading = position.coords.heading;
$('#getting-position').html(
"have position" +
" latitude = " + latitude.toString() +
" longitude = " + longitude.toString()
);
/* Add marker to Google maps etc... */
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
$('#permission-denied').show();
break;
case error.POSITION_UNAVAILABLE:
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
$('#position-unavailable').show();
break;
case error.TIMEOUT:
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
$('#timeout').show();
break;
case error.UNKNOWN_ERROR:
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
$('#unknown-error').show();
break;
}
}
$(document).ready(function() {
initialize();
});
</script>
</body>
</html>