# Google Maps iFrame in webview component

**URL:** https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047
**Category:** Project Showcase
**Created:** [October 12, 2020, 1:33pm UTC](https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047 "2020-10-12T13:33:52Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Antonino\_Nolasco](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antonino_nolasco/32/80601_2.png) [@Antonino\_Nolasco](https://community.glideapps.com/u/Antonino_Nolasco)
#### Post date: [October 12, 2020, 1:33pm UTC](https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047/1 "2020-10-12T13:33:52Z")

</div>

If you want embed google maps in Glide app you have to create a template column with this code:

`<div style="width: 700px;position: relative;"><iframe width="700" height="440" src="https://maps.google.com/maps?width=700&amp;height=440&amp;hl=en&amp;q=ADDRESS&hl=it&amp;ie=UTF8&amp;t=&amp;z=19&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><div style="position: absolute;width: 80%;bottom: 10px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;text-align: center;"><small style="line-height: 1.8;font-size: 2px;background: #fff;">Powered by <a href="http://www.googlemapsgenerator.com/da/">Googlemapsgenerator.com/da/</a> & <a href="https://iamsterdamcard.it/">iamsterdamcard (it)</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><br />`

Replace “ADDRESS” with your personal address column and that’s it! Now add Web View component and select the template column just created.

---

<div class="post-metadata">

### Author: ![joderson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joderson/32/1942_2.png) [@joderson](https://community.glideapps.com/u/joderson)
#### Post date: [October 13, 2020, 4:32am UTC](https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047/2 "2020-10-13T04:32:29Z")

</div>

> [@Antonino\_Nolasco](#):
>
> Powered by [Googlemapsgenerator.com/da/](http://www.googlemapsgenerator.com/da/) & [iamsterdamcard (it)](https://iamsterdamcard.it/)
> #gmap\_canvas img{max-width:none!important;background:none!important}

wow, thank you Antonio

---

<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: [October 13, 2020, 5:48am UTC](https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047/3 "2020-10-13T05:48:44Z")

</div>

@david will this influence the cost that glide is paying google? If so would it reasonable to think that you might close down this possibility?

---

<div class="post-metadata">

### Author: ![Antonino\_Nolasco](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antonino_nolasco/32/80601_2.png) [@Antonino\_Nolasco](https://community.glideapps.com/u/Antonino_Nolasco)
#### Post date: [October 13, 2020, 6:11am UTC](https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047/4 "2020-10-13T06:11:17Z")

</div>

> [@Krivo](#):
>
> will this influence the cost that glide is paying google? If so would it reasonable to think that you might close down this possibility?

This is a free service. You haven’t to insert any api key.

---

<div class="post-metadata">

### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)
#### Post date: [October 25, 2020, 1:08am UTC](https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047/5 "2020-10-25T01:08:45Z")

</div>

@Antonino_Nolasco

Have you tried to see a route map in Webview component?

Gracias

---

<div class="post-metadata">

### Author: ![Antonino\_Nolasco](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antonino_nolasco/32/80601_2.png) [@Antonino\_Nolasco](https://community.glideapps.com/u/Antonino_Nolasco)
#### Post date: [October 25, 2020, 8:30am UTC](https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047/6 "2020-10-25T08:30:59Z")

</div>

No, I didn’t try but I think it will be possible enabling sdk for gmaps called Directions API.  
You can look [here](https://developers.google.com/maps/documentation/directions/overview)

---

<div class="post-metadata">

### Author: ![Petr\_Shemyagin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/petr_shemyagin/32/59902_2.png) [@Petr\_Shemyagin](https://community.glideapps.com/u/Petr_Shemyagin)
#### Post date: [November 9, 2020, 7:37am UTC](https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047/7 "2020-11-09T07:37:34Z")

</div>

Hey @Antonino_Nolasco

Thank you for the information!

Do you have any ideas on how to make the pins on the map not exact location but a location radius? Like in Airbnb. I really need it in my app to not show users exact location, but cannot fimd a way of how to do this.

Will appreciate any ideas, thank you!

---

<div class="post-metadata">

### Author: ![MenemaniApps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/menemaniapps/32/36848_2.png) [@MenemaniApps](https://community.glideapps.com/u/MenemaniApps)
#### Post date: [June 9, 2022, 11:24pm UTC](https://community.glideapps.com/t/google-maps-iframe-in-webview-component/17047/8 "2022-06-09T23:24:25Z")

</div>

Thank you!
