I have this pen: https://codepen.io/dteiml/full/PNMwZo with the following javascript code:
$('#getWeather').on('click', function() {
navigator.geolocation.getCurrentPosition(success);
function success(pos){
// get longitude and latitude from the position object passed in
var lng = pos.coords.longitude;
var lat = pos.coords.latitude;
// and presto, we have the device's location!
console.log("test");
$('body').html('You appear to be at longitude: ' + lng + ' and latitude: ' + lat);
}
});
and html code:
<button id="getWeather">
Get my location
</button>
<body>
</body>
that I forked from somebody that works and one that I created myself http://codepen.io/dteiml/full/aNevrE with the same exact code and settings that doesn't work. What might be the problem?
Had you checked the error console, it would have explained exactly what the difference is:
https vs http
pen.js:3 getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See [redacted] for more details.
(Sorry for the redated, I couldn't post the answer exactly as given because of the link.)
You have to use https:// instead of http:// google dont accept request from http protocol.
Switch your codepen to https://codepen.io/dteiml/full/aNevrE and it should work.
Here is the warning:
getCurrentPosition() and watchPosition() are deprecated on insecure
origins. To use this feature, you should consider switching your
application to a secure origin, such as HTTPS.
code
Related
I have a Google Script-JSON-javascript webapp working but when I changed the JSON output, saved a new Google Script version, and published as web app, the webpage throws a CORB error.
Going back a version in GS, allowed it to work again. Why would a new GS version cause an error. Even with the same code but in a new version the error is still thrown. Is there a GS version caching issue? What I can do to update the version?
Working page with current version: https://arcacademy.ca/arc-academy-calendar-2018-2019/
Note: You can see in Console the JSON text being sent. The new code has the same format/structure, except changed the color values from hex to 1 to 10.
To tried to fix this by creating a new GS script but receive the same error:
Cross-Origin Read Blocking (CORB) blocked cross-origin response
https://script.google.com/macros/s/AKfycbyM51kxwQOYM3hRyrW7semhmUka2z2w-jU09KBPL38IxKapeQQ1/exec?callback=receivedCalendarEvents
with MIME type text/html. See
https://www.chromestatus.com/feature/5629709824032768 for more
details.
Here's the not working page throwing above error in console: https://arcacademy.ca/clone-of-arc-academy-calendar-2018-2019/
Google Script web app deployed with:
Execute as Me
Anyone, even Anonymous
Google Script code:
function doGet(e) {
if (e.parameter.method=="populate_events") {
var scriptProperties = PropertiesService.getScriptProperties();
var calendarId = scriptProperties.getProperty('calendarId') || 'primary';
var v = extractCalendarDateColors( calendarId, e.year );
return ContentService.createTextOutput(e.parameter.callback + "(" + JSON.stringify(v) + ")")
.setMimeType(ContentService.MimeType.JAVASCRIPT);
}
}
Javascript code for working page (src= is the only thing changed for error page):
<script>
calendarEvents = {};
function receivedCalendarEvents(jsonData) {
console.log('received',jsonData);
calendarEvents = JSON.parse(jsonData);
}
</script>
<script src="https://script.google.com/macros/s/AKfycbzMCDiTzxGx2cN5dtXqCG2gvxJ6FGZ_t6UuPiT-HyDesu2--EY/exec?callback=receivedCalendarEvents"></script>
<script>
Google Console Cloud -- I have set the following:
Enabled Calendar API
Added Apps Script Client ID
I feel like I'm lost in Google access land. Any help would be greatly appreciated!
Thank you Tanaike for the inspiration on this problem. The CORB (cross origin error) was, as you mentioned above, likely to do with javascript call.
I updated the javascript: https://script.google.com/macros/s/#####/exec?method=populate_events&year=2018
And updated the google script to use the parameters without throwing an error:
e.parameter.method
e.parameter.year
So it seems all the time I was getting the cross origin error, it was from a poorly formed javascript call and an error on the google script side, which returned an error and not a properly formed JSONP object.
Thank you for your help Tanaike!! :)
I recently made a web app and part of it looks for the user's location.
function complete(pos) {
var coordinates = pos.coords;
var positions = {lat: coordinates.latitude, lng:
coordinates.longitude};
console.log(positions);
}
function fail(error) {
console.log('failed')
};
var opt = {
enableHighAccuracy: true
};
navigator.geolocation.getCurrentPosition(complete, fail, opt)
But, in some locations like my school, it always returns (0,0) for some reason. It works perfectly fine in other locations, like on private networks.
Can anyone suggest any reasons why or any workaround? Thanks. (I already white listed the site I was using to run this and allowed location_
According to docs navigator.geolocation is not going to be supported in Chrome with http:// (v50.0+). Use https:// instead if that's possible.
That can also cause your issue because you mentioned that only in some places and I guess in some (chrome) browsers it doesn't work.
Note: As of Chrome 50, the Geolocation API will only work on secure
contexts such as HTTPS. If your site is hosted on an non-secure origin
(such as HTTP) the requests to get the users location will no longer
function.
I'm working on a little weather app project, but now that i've changed the code to make the long and lat change depending on you geo location, the button doesn't work. When i click it nothing happens, i can't even tell if the API is pulling the data. Here is my code as well as a codepen I made to fool around with.
http://codepen.io/lettda/pen/yaGaLx
$(document).ready(function(){
$("#reveal").on("click", function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
var long;
var lat;
var api = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=de61ccfbde0405f57d64dbb53323fccf";
$.getJSON(api, function(data){
$(".message").html(JSON.stringify(data))
});
});
};
});
});
open your developer tools (in chrome press F12) and have a look into the console:
pen.js:4 getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://.... for more details.
it's an simple cross origin problem
I try to detect the exact location of user and specially the street if i can.
I tried that using the IP but this didn't work for me because it didn't give the exact location example for what i want is Lebanon Beirut Azarieh or Lebanon Beirut ABC Achrafieh and than i want to store this location in MYSQL database table using PHP.
i tried this code here
this code give a good location in Firefox on Localhost
but Online on Firefox and Google chrome give me that Your Location: Not Available
also it didn't work on phone browser iPhone and android (safari,chrome,...)
the idea is a user in the company want to use the website on his phone a special page on the website when he use it i want to take here exact location with the street and store this in database
You can use a flag, enableHighAccuracy:true
Here's an example code:
$(document).ready(function($){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
//alert('latitude: '+latitude+' longitude: '+longitude);
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
},{timeout:20000,enableHighAccuracy: true});
}
else{
alert('no geolocation support');
}
});
And I also want to quote that enableHighAccuracy depends from device to device.
reference here
Here is an android code link,you can get some idea from.getlocation with street
I have a button that is meant to check your location and in return show you the closest locations.
I've got it working perfectly in Firefox, and it wasn't on a live domain before but on a development server and I saw several resources that supported the thought that it had to be on a live domain for html 5 geolocation to work in Chrome.
Now we have moved to the real domain, and still the same results, only Firefox is working and in Chrome and I'm pretty sure Safari it says 'unable to retrieve location' meaning there was an error. I've made sure to check that Chrome isn't blocking the site for requesting my location (no popup comes up to click yes/no) although it is definitely activated in my settings. Same result on different PC's.
Any thoughts what could block this? It's on a live domain.
This is my code:
function geoFindMe() {
var output = $('.location-use');
if (!navigator.geolocation){
$(".location-use").html('Geolocation is not supported by your browser');
return;
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
//find nearest restaurant location from these lat n long
NearestLoc( latitude, longitude );
};
function error() {
$(".location-use").html('Unable to retrieve your location');
};
$(".location-use").html('Locating...');
navigator.geolocation.getCurrentPosition(success, error);
}
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
This answer is here (thanks user3186314), Chrome requires HTTPS