Simple geolocation and Google Maps wrapper - Hype Pro

Using JavaScript with Hype
1

I figured this was maybe worth a top-level post, since it could be useful to others.

This is a bare-bones Hype Pro 3 wrapper (won’t work in the standard or demo versions, TTBOMK) for Google Maps and geolocation. Most of the major work is done in the ‘externals.js’ script; it’s kicked off by an onSceneLoad call in Hype.

After that the script:

  1. Gets user loc;
  2. Passes that info to various parsers;
  3. Builds a Google Maps object; and
  4. Sets up display of the map in the Hype document.

Be sure to check out the head HTML for information on using Google Maps’s API key.

Enjoy!

ShrinkWrapper.zip (19.1 KB)

3 Likes
2

That’s lovely !! Thanks
Next step would be to allow use of personalized maps stored in the device (like with Leaflet : http://leafletjs.com)

1 Like
3

Interesting idea, that.

4

Yes leaflet is a great tool. I was involved in a project where they used leaflet with excellent results. Should be possible to use with Hype I think and with OpenStreetMaps there is no need to struggle with Google…

2 Likes
5

Indeed, I was thinking of embedding a javascript solution to view MBTiles and display position on mobile device when it’s online.
any thoughts ?

6

Hey Warren, (or anyone else if you’re there, please!)

I know this is 18 mths after your original post, but this doesn’t work for me on my iphone 5 running ios 10.2. As I got the ‘sorry something went wrong’ error with your key, when I got my own google api key there was no error, but my map was still stuck in the default Antarctica. My phone location services are set to Always, and I’m getting locative awareness from other map apps -

I’m using Hype 3.5.5 Pro. Could this be because I’m using bluehost web hosting that’s not secure, ie a site domain served via the old http instead of https - I know geolocation isn’t meant to work in Chrome unless called from a secure site, but I thought it might still work in IOS Safari ?

If it’s not that, I tried using google’s code, but then I get stuck with where to put things in Hype, (and the map appears with - error, geolocation service failed).

https://developers.google.com/maps/documentation/javascript/geolocation

7

I’m getting a ‘Location information is unavailable’ message myself when I run it in preview in Safari. In the external JS that accompanies the Hype file, you’ll see that’s what you get when (1) location services are working, but (2) the browser’s location can’t be determined.

However, when I use the ‘live result’ here, things work as expected.

And when I preview in Firefox, it works as expected.

This suggests to me that Safari is preventing the local preview page from using geolocation, probably because security bla bla bla. IIRC, previous versions of Safari/desktop were not quite this anal about such things. So for testing/debug purposes I’d say use Firefox, not Safari.

As far as the other errors are concerned … lack of HTTPS support could be a problem. ‘Sorry something went wrong’ is not, alas, particularly illuminating.

You’re not uploading to Dropbox to preview, are you? They discontinued HTML support about 6 months ago.

8

No, not using Dropbox, (although at least that’s secure and served via https, unlike my old web hosting via bluehost, which isn’t). I only do quick tests, upload & test directly on iPhone, and if it can’t work on IOS there’s not much point. I’m not sure how much fiddling’s involved in getting a hosted domain certified (from http to https) and wouldn’t like to have to rely on bluehost support for that -

I read a later post from someone indicating it can’t work - (shame google can’t be more explicit in their docs) -

But - am all all ears if it can be made to work -
ta
Sharon