Show cool Google Maps/Streets journey view in your app

Recently I found a cool website that works perfectly in web view that would show an animated “journey” from 2 inputs: origin and destination.

Here’s how it works:

The link to the original page with all parameters:

https://www.mapchannels.com/RouteMaps.aspx

Here’s my Construct URL column to get the webview link:

For start & destination, it accepts both lat/lon & address in text form. Lat/lon must be enclosed with brackets e.g: (35.63, 40.28).

If you pass your Google API key inside the Construct URL column then you can get pass the “advertisement” page at the start.

Hope it helps!

I will soon also post a CSS walkthrough to custom color map pins in Glide so stay tuned!

30 Likes

Very cool!

1 Like

Ohh very nice :+1: :clap: thank you….

1 Like

Do you have an example of how to pass the Google API KEY inside the URL? @ThinhDinh

Very very cool brother. Great finding

1 Like

Here’s their reference on how to add an API key.

https://www.mapchannels.com/ApiKey.aspx#8

You have to create an account.

3 Likes

@ThinhDinh Is the api key exposed when doing an app exam? I would expect so.

Yeah I passed my key as a params: key=abcdef. That worked as expected but as you said it might expose the key in the webview link.

However you can restrict the domains that can use the key in the Google Cloud console. I think it’s as close as it gets.

@ThinhDinh do you know if you can specify the domain of your app (if using glideapp.io) like myapp.glideapp.io - or you need to use just glideapp.io - which other glide apps also use - and thereby is open to other glideapps to (mis)use

I found some examples like this for specifying a domain.

*web.domain.org/*
*.domain.org/*
https://domain.org/*

I assume you can just put your full app link in there instead of just glideapp.io, which would expose it to being used in other Glide Apps.

2 Likes

As promised, here’s the thread for color coding map pins.