# Show cool Google Maps/Streets journey view in your app

**URL:** https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502
**Category:** Ask for Help
**Created:** [August 15, 2021, 1:14pm UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502 "2021-08-15T13:14:07Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 15, 2021, 1:14pm UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/1 "2021-08-15T13:14:07Z")

</div>

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:

> **[Screen Recording 2021-08-15 at 08.09.18 PM](https://media.lowcode.agency/8Lu5wpNK)**

The link to the original page with all parameters:

[https://www.mapchannels.com/RouteMaps.aspx](https://www.mapchannels.com/RouteMaps.aspx)

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/1/91e545fd3f6b79b0d8fba79419b94fa22ce55e1c.png)

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!

---

<div class="post-metadata">

### Author: ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [August 15, 2021, 1:23pm UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/2 "2021-08-15T13:23:04Z")

</div>

Very cool!

---

<div class="post-metadata">

### Author: ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)
#### Post date: [August 15, 2021, 2:21pm UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/3 "2021-08-15T14:21:51Z")

</div>

Ohh very nice 👍 👏 thank you….

---

<div class="post-metadata">

### Author: ![Francisco\_Maldonado](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/francisco_maldonado/32/18423_2.png) [@Francisco\_Maldonado](https://community.glideapps.com/u/Francisco_Maldonado)
#### Post date: [August 15, 2021, 2:26pm UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/5 "2021-08-15T14:26:01Z")

</div>

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

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [August 15, 2021, 5:50pm UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/6 "2021-08-15T17:50:45Z")

</div>

Very very cool brother. Great finding

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 15, 2021, 11:23pm UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/7 "2021-08-15T23:23:03Z")

</div>

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

[https://www.mapchannels.com/ApiKey.aspx#8](https://www.mapchannels.com/ApiKey.aspx#8)

You have to create an account.

---

<div class="post-metadata">

### Author: ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)
#### Post date: [August 16, 2021, 3:54am UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/8 "2021-08-16T03:54:42Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 16, 2021, 4:24am UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/9 "2021-08-16T04:24:42Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo)
#### Post date: [August 16, 2021, 4:43am UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/10 "2021-08-16T04:43:14Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 16, 2021, 4:45am UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/11 "2021-08-16T04:45:45Z")

</div>

I found some examples like this for specifying a domain.

```auto
*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](http://glideapp.io), which would expose it to being used in other Glide Apps.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [August 18, 2021, 1:50pm UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/12 "2021-08-18T13:50:17Z")

</div>

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

> [@CSS: Custom color for map pins](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641):
>
> We have a little bit of a color show going on here wink As promised in my last thread about showing a journey view in your app, here’s the thread for custom color map pins. Requirements A tab with details view You know what status you can have, what color should they be You know what field you will use as the title of the pin The columns Single code: A template column to get each line’s customized CSS, with dynamic info for the pins’ title and color code. J…

---

<div class="post-metadata">

### Author: ![JAMES\_VIDAL\_BURBANO](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/james_vidal_burbano/32/40702_2.png) [@JAMES\_VIDAL\_BURBANO](https://community.glideapps.com/u/JAMES_VIDAL_BURBANO)
#### Post date: [September 10, 2022, 7:45am UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/13 "2022-09-10T07:45:06Z")

</div>

fantastico, mil gracias. es posible que solo al escibir la ubicacion actual y ubicacion destino se vea el mapa solo sin necesidad de darle click en ver mapa.  
2. es posible que no se vean 3 cuadros sino simplemente el mapa?

---

<div class="post-metadata">

### Author: ![JAMES\_VIDAL\_BURBANO](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/james_vidal_burbano/32/40702_2.png) [@JAMES\_VIDAL\_BURBANO](https://community.glideapps.com/u/JAMES_VIDAL_BURBANO)
#### Post date: [September 10, 2022, 7:46am UTC](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/14 "2022-09-10T07:46:48Z")

</div>

fantastico, mil gracias. es posible que solo al escibir la ubicacion actual y ubicacion destino se vea el mapa solo sin necesidad de darle click en ver mapa.  
2. es posible que no se vean 3 cuadros sino simplemente el mapa?  
de esta forma? 👇  
 ![WhatsApp Image 2022-09-10 at 2.30.32 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/f/ef5c688017b09510fa3d238cc4ab47756bb7e686.jpeg)
