Webview (iframe) with geolocation

Hello,

I have a problem to access for the user geolocation inside the iframe and I guessed that the problems is because the iframe have a sandbox and don’t have allow=“geolocation”.

I made a custom component in ReactJS with Mapbox and many code in JS that requires geolocation because I need for my app a location of users.

// Without iframe inside Glide works fine.
https://www.app.roundroute.es/mapview?latitude=28.14336395263672&longitude=-15.65500259399414

To get user geolocation i’m using:
navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition

getRegion = () => this.region;

getCurrentPosition = async () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
if (position &&
position.coords &&
position.coords.latitude &&
position.coords.longitude) {
this.setRegion(position.coords);
}
}, this.positionError, options);
}
else {
console.log(‘getCurrentPosition.navigation.undefined_geolocation’, navigator);
}
return this.region;
}

watchPosition = () => {
if (navigator.geolocation) {
this.trackId = navigator.geolocation.watchPosition(position => {
if (position &&
position.coords &&
position.coords.latitude &&
position.coords.longitude) {
this.setRegion(position.coords);
}
}, this.positionError, options);
}
else {
console.log(‘getCurrentPosition.navigation.undefined_geolocation’, navigator);
}
}

clearWatch = () => {
if (navigator.geolocation && this.trackId !== null) {
navigator.geolocation.clearWatch(this.trackId);
}
}

positionError = (error) => {
switch (error.code) {
case error.PERMISSION_DENIED:
this.setError(“Error: Permisos GPS rechazados.”);
break;
case error.POSITION_UNAVAILABLE:
this.setError(“Error: Información de la localización no disponible.”);
break;
case error.TIMEOUT:
this.setError(“Error: Tiempo de espera para acceder a la ubicación elevado.”);
break;
case error.UNKNOWN_ERROR:
this.setError(“Error: Error con el GPS desconocido.”);
break;
default:
this.setError(error.message);
break;
}
}

The methods are rejected always with ERROR.PERMISSION_DENIED and the browser have enabled the GPS, I checked the permissions from the page with the chrome console:

// Works great
navigator.geolocation.getCurrentPosition(position => console.log(position));

I made a new view with the iframe and location component and I have a retry each 5 seconds and when the location are enabled and the permissions accepted are rejected yet.

Thanks.

1 Like

just take geolocation from a distance column or current location switch

I made this view with location switch and inside the webview don’t received the permissions of the parent (glide window.navigator)

I’m not sure you’ll ever be able to access localisation details, remember the app is acting as a website on a phone and therefore browsers restrictions applies (safari, chrome…), it’s not like a native app that you download on the stores where you can grant specific authorizations.

1 Like

Hello AymenM, thanks for your response.

I have checked that the browsers restrictions don’t are the problem getting to the map URL (RoundRoute) without glide iframe and the geolocation work fine and then I check the same URL in the same browser received the location ERROR.PERMISSION_DENIED

I guessed that the iframe need allow=“geolocation”.

This is the iframe in glide:

The sandbox field add limits to the child URL and I hope could add allow=“geolocation” on iframe.

Oh I see, unfortunately I’ll not be able to help you on that, hope that you’ll find a way soon !

1 Like

I’m using google maps webview. I’ve used construct url method in glide editor.
It’s working perfect for my projects.
Let me know how I can help you with google maps.

3 Likes

@Purvang_Joshi my understanding was that you could not embed any google services in glide webview. If you can would you mind sharing :sunglasses:

¿And the Google Maps webview show the user location and work ass gps?

I’ve achieved this from Google Maps Embed API (Documentation Embedding a map  |  Maps Embed API  |  Google Developers)

I haven’t tried the current location of the user as origin @alesanderlopez

How to implement?
First of all, create a GCP Project and enable maps Embed API then obtain a key.

Then, You need a construct URL column,


Then, create a template column,

Screenshot 2021-03-16 at 8.40.31 PM



And, Now create a webview with template column.

You can change zoom size, map mode, and many more parameters mentioned in the documentation.

Hope that I’ve explained well, @Krivo

16 Likes

@Robert_Petitto I think I read a thread where you mentioned having lost a client due to the basic map features.

Would something like what @Purvang_Joshi did here work for you/your client?

Thanks for thinking of me. It wasn’t a map the customer needed but rather an address lookup from a keyword (like Eiffel Tower) or an autocomplete verified address from a portion

1600 Pennsylvania Ave → 1600 Pennsylvania Avenue NW, Washington, DC 20500

2 Likes

@Purvang_Joshi Thanks for sharing. Setting up a GCP project is at the moment a bit of a challenge for me. Lots of things to do before it can be used. Might look at it at a later stage.

Does all the users need to use a google account to use the map - or is that not the case. What about the users accept to privacy policy that Google seems to want you to upload. Is there a pop-up box where the user must accept that privacy policy.

1 Like

I didn’t show the template component before i going to try use iframe inside the template.

Thanks !

I tried with that method and i’m with the same problem.

The iframe add sandbox and don’t add allow=“geolocation” i supposed that method replace the iframe with sandbox and replace with my iframe.

:confused:

Setting up a GCP account and obtaining a key is less then 5 Mins. It’s so simple and free too.
Embed Maps APIs are always free to use.

Your App users doesn’t require any google account. Google Maps will be always shown whether it’s logged in or not. I don’t think privacy policy need here.

Let me know if you need any help regarding GCP Setup.

1 Like

Hey, You should try with location component.
Use returned value as origin of map. It should work.
Also, using “Current+Location” line in origin is acceptable, but it’ll show based on ISP based location.

1 Like

@Purvang_Joshi I might a bit of help. Got stock - have to supply privacy policy etc. Any videos on how to do?

Go to https://console.cloud.google.com/

Create a new project or select existing one.

Search ’ Maps Embed API’ and open that.

Now, Click Enable.

Then Search ‘Credentials’ and open that.

Create Credentials → API Key

2 Likes

@Purvang_Joshi
Well, I hit the wall where I need to input info about Oauth etc. That is why I have kept asking for more info. Thanks for your patience.