[HELP] How to get the users position data using Google Geolocation API?

Code Feedback
1

I ask this out of a desperate necessity. Recently, when iOS was updated to version 10, getting the geolocation using .getCurrentPosition() stopped working in these devices on a HTTP connection. I can still get the position data on HTTPS, but OpenWeatherMap’s API call link is in HTTP and doesn’t work on a HTTPS connection. So, short story… my Local Weather app doesn’t work on my iPad. This wouldn’t have been a big concern if only it wasn’t that I have limited time to spend on a PC each day, and most of my learning happens on the iPad. I could either change to an API that offers free usage on HTTPS, but I would have to let go of some 75% of the work I’ve done. My idea is that, in case of an error scenario while retrieving geolocation with .getCurrentPosition(), I could use Google Geoposition API to get the latitude and longitude data and continue using the weather app on HTTP. But I can’t find any good resource online on how to use Google Geoposition. Using the POST method, and how to send a JSON populated with the required data is quite new to me. If you can guide me on how to do this, or direct me to good resources, that’d be great. Or if there’s a better work around for my problem, that too would be wonderful.

Link to my Pen --> http://codepen.io/BluecodeA/pen/RGNVjV?editors=0010

UPDATE: I got a solution to the issue that I had thanks to @PortableStick. Still if anyone can leave info or a link to some resource about using Google Geolocation, it’d be great.

2

I ended up using http://apixu.com for my weather app.

Its also free but supports https.

3

Thank you, I did think about this option, but still wary of having to edit most of the code at this point when i’m nearly done with the project. I was about 75% done with it before I unfortunately update my iPad :expressionless:

4

Don’t fret! Just throw https://crossorigin.me in front of your weather API calls, like so

https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=" + apiKey
1 Like
5

Aren’t there some downsides to doing this? Do people actually do this in production?

6

I wouldn’t do it in production, no way. But for a practice project that could be redone in a few minutes once the OP has some more practice under their belt? Sure, why not?

7

Geez man… Thanks. Thank you. Thank you. Thank you. Couldn’t believe there’d be such a simple solution to my problem. That makes the page slightly slower, but perhaps I could code it to run that link only when the device is running on iOS. But phew… now I can get back to coding :grin: Thanks again…

8

Unfortunately, you’ll need that HTTPS proxy for desktop users running either Chrome or Safari as the same restrictions apply. Might as well keep it for everyone.

9

Ah that’s a bummer. Might as well keep it as it is then. But a lesson learnt. Will keep an eye open to see if the API supports HTTPS hereafter.

10

So for production sake for more advanced people how would you do it?

11

That depends on the exact nature of what’s being produced, but the answer would boil down to using a service that’s hosted securely. Anything that I write with the expectation that people will actually use and depend on it will only call APIs over secure connections. Sometimes that means paying a company like OpenWeatherData or DarkSky for my access, but it could also mean hosting the service myself if it’s data I can serve up.

On my website, I’ve actually got a Node service running that takes care of my backend API projects, but also the APIs that I contact for my front end projects. My quote generator is actually making a call to my own server, where Node will spit out a random quote from a file I keep there. Because I’ve secured the server myself, the browser doesn’t freak out. On the other hand, while my weather forecast app also calls the API on my own server, my server then makes its own API call to DarkSky and then processes the response data before handing it off to the client. I could, if I wanted, use any weather service in my Node app because all my browser cares about is the fact that the connect to my API server is encrypted. In a way, it’s like my own crossorigin.me proxy, but it does even more.

I hope that bit of ramble answered your question, but let me know if anything is unclear.

1 Like
12

Use a different API! Sorted.

13

Very informative, thank you very much. Now that I am getting better at Node I will have to implement something like that.

That’s what I ended up doing for most of the projects, but I want to know the correct way to do something, and why to do it like that.