Inserting google map that shows and tracks user's location

Spencer shared this question 2 years ago
Answered

Hi,


Is it possible to add a map that shows the user's current location and tracks the user's location as they move?


Thanks

Comments (9)

photo
1

Hi Spencer,


Unfortunately that will not be possible as JIM cannot interact with the location services within your phone.


Best,


Danielle

photo
1

any chance of having this in the future?

photo
1

If you're willing to get your hands dirty with some JavaScript you can use the HTML5 Geolocation API to achieve what you're looking for. You can embed your own custom HTML/JS/CSS in an HTML element which will push that code into an iframe within the prototype. Your map can live there or you can interact with the parent frame using JavaScript to update what you need for your map from the API.


Here's a good example with Google Maps: https://mobiforge.com/design-development/html5-mobile-web-a-guide-geolocation-api


Also, be sure you have location services enabled for your mobile browser as if you've ever denied access you'll need to manually re-enable it.

photo
1

Thank you stphn, I did just that, the map is on an html5 page using gmaps API. When I load it on a Website widget it works fine on the browser. But, when I open the prototype on the mobile app, geolocation doesn't work, and for my purposes I need to test it on the mobile. I think it is some kind of restriction between the JIM app and the geolocation services of the phone.

I haven't tried that specific solution you shared, though.

photo
2

I've attached a zip file containing a project that works on my device (iPhone 6s/Safari 9.3.5) as well as 2 screenshots from it requesting permission and displaying on my device. You can see it running live via your device here: https://dl.dropboxusercontent.com/u/628429/justinmind/geolocation/index.html#/screens/d12245cc-1680-458d-89dd-4f0d7fb22724


If you're using iOS I'd double check that you're allowing Safari to use your location (Settings>Privacy>Location Services: Safari Websites: While Using)

photo
1

Thank you, Iit's weird cause I opened the geolocation.vp file and it doesn't show the map, you can check the shared version here... https://www.justinmind.com/usernote/tests/21400625/21400628/21504512/index.html

photo
1

The geolocation.vp file won't show the map in Prototyper because I'm using an HTML widget with the needed JavaScript to surface the map. You will have to use a browser (desktop or mobile) and allow location to be used in order to see the map itself. I was hoping this would be a useful alternative to get the MAP and API usage to interact with your prototype. You would need to communicate with the iframe that Prototyper uses for this HTML widget.

I've looked at this URL you've just shared on both desktop and mobile Safari (iOS 9.3.5 and 10.0.1) and I'm able to see the map rendering in the mobile browser. Please see the attached photos.

photo
1

thank you stphn, I got it working on the browser, it's really helpful, but as it is a mobile prototype, I need to test in in the JIM iOS app, not the browser itself cause then I get the search bar and the bottom bar which is awful for a "native" app feel.

photo
1

I understand. Hopefully the Just in Mind team will add this product feature to a near release.

photo