# Utilizing the new autocomplete address feature and automatic compute to display a map of a location

**URL:** <https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446>\
**Category:** Showcase\
**Created:** [August 4, 2023, 4:43am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446 "2023-08-04T04:43:01Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![briansport13](https://avatars.discourse-cdn.com/v4/letter/b/48db29/32.png) [@briansport13](https://community.miniextensions.com/u/briansport13)\
**Post date:** [August 4, 2023, 4:43am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/1 "2023-08-04T04:43:01Z")

</div>

![CleanShot 2023-08-04 at 11.19.29](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/0208c157bf1f06cbf0fdf237b87d1864e459c921.gif)

Hi, I have this setup where I have an address field and a computed formula field that loads HTML that changes every time a user enters an address utilizing Google Maps Embed as well as the new autocomplete address feature and automatic compute. I wanted to do a quick guide for people who want to have a similar setup with only 2 simple steps.

Steps:

1. Text Field with address auto complete  
 ![CleanShot 2023-08-04 at 11.37.26@2x](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/cb78cb67b4871c83c3d5a65df6bee756eb5a3978.png)
2. Formula Field with HTML compute enabled

```auto
'<iframe \n width="620" \n height=350" \n style="border:0" \n loading="eager" \n allowfullscreen \n referrerpolicy="no-referrer-when-downgrade" \n src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=' & SUBSTITUTE({Address Field}," ","+") & '"> \n </iframe>'

```

 ![CleanShot 2023-08-04 at 11.39.13@2x](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/940d1bdacf3140f0ae7a564398f50ab40a75ce48.png)

And that’s it you now have a functional form with map display!

---

<div class="post-metadata">

**Author:** ![Moe](https://avatars.discourse-cdn.com/v4/letter/m/ad7895/32.png) [@Moe](https://community.miniextensions.com/u/Moe)\
**Post date:** [August 4, 2023, 10:09pm UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/2 "2023-08-04T22:09:42Z")

</div>

Nice setup, Brian! If you don’t mind me asking, what is this form used for? I’m trying to understand the real-world applications of these functions.

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 5, 2023, 5:59pm UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/3 "2023-08-05T17:59:14Z")

</div>

Awesome thank you for sharing Brian, I absolutely have a use case for this

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 5, 2023, 6:20pm UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/4 "2023-08-05T18:20:57Z")

</div>

Do you think it will be possible to show two address fields on the same map with a basic route and calculate the distance between the two addresses?

---

<div class="post-metadata">

**Author:** ![briansport13](https://avatars.discourse-cdn.com/v4/letter/b/48db29/32.png) [@briansport13](https://community.miniextensions.com/u/briansport13)\
**Post date:** [August 6, 2023, 9:12am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/5 "2023-08-06T09:12:21Z")

</div>

![CleanShot 2023-08-06 at 16.04.21@2x](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/2b1db547d7f16559fa5327c8982c91996815c30b.jpeg)

You absolutely could! Use this formula instead:

```auto
'<iframe  
      width="620"  
      height=350"  
      style="border:0"  
      loading="eager"  
      allowfullscreen  
      referrerpolicy="no-referrer-when-downgrade"  
      src="https://www.google.com/maps/embed/v1/directions?key=YOUR_API_KEY&origin=' & SUBSTITUTE(From," ","+") & '&destination=' & SUBSTITUTE(To," ","+") & '">  
    </iframe>'

```

But in case you would need that route, distance, & eta info back on your base, you would need to either make a button that would trigger a webhook to send that information to an external service such as make that would call Google Maps API & map that info back to your base or you would trigger it in the background after the user submitted the form using the trigger webhook feature.

---

<div class="post-metadata">

**Author:** ![briansport13](https://avatars.discourse-cdn.com/v4/letter/b/48db29/32.png) [@briansport13](https://community.miniextensions.com/u/briansport13)\
**Post date:** [August 6, 2023, 9:22am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/6 "2023-08-06T09:22:18Z")

</div>

I’m currently using it for cashier delivery purposes to show the customer where the cashier would enter the address. The customer can then view the map result to ensure it’s the correct address. I’m considering allowing customers to have a self-service order form, but I still need a few components, such as a clear button and a get current location button. I have requested these components here: [Button For Entering GPS Location & Clearing Field](https://community.miniextensions.com/t/button-for-entering-gps-location-clearing-field/445). I hope you guys can fulfill my request. 🙂

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 6, 2023, 4:18pm UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/7 "2023-08-06T16:18:55Z")

</div>

Awesome, thank you for the reply. Awesome work, I hope Mini Extensions can do that for you.

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 6, 2023, 4:19pm UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/8 "2023-08-06T16:19:19Z")

</div>

I will use the feature  
in last mile delivery service

---

<div class="post-metadata">

**Author:** ![Moe](https://avatars.discourse-cdn.com/v4/letter/m/ad7895/32.png) [@Moe](https://community.miniextensions.com/u/Moe)\
**Post date:** [August 7, 2023, 3:21am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/9 "2023-08-07T03:21:55Z")

</div>

Thank you for sharing the use case, Brian! Both features you suggested make sense. I’ll ask the team to add them to the product roadmap. Let me know if you have any other requests!

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 7, 2023, 6:05am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/10 "2023-08-07T06:05:39Z")

</div>

Hi Brian, I get this message from google

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/f45febadf94d77c25ca947a3ca11ddbb2b1b1e74.png)

I did add this Extension on my API on my Google cloud project key and everything else is working but the embed part doesn’t want to work. any suggestions?

---

<div class="post-metadata">

**Author:** ![briansport13](https://avatars.discourse-cdn.com/v4/letter/b/48db29/32.png) [@briansport13](https://community.miniextensions.com/u/briansport13)\
**Post date:** [August 7, 2023, 6:18am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/12 "2023-08-07T06:18:19Z")

</div>

Yes, I think this would cover a lot of people’s use cases regarding maps. I was thinking of something like this, where you would be able to fill a regular text field with both the latitude and longitude separated by a comma. I think this would be simpler than having to display two different fields the way the previous “get geolocation” feature is designed, since it would be pretty easy for us to use a formula field to get both the latitude and longitude separately. And the “Clear Fields” button would just be able to clear text, long text field, linked record selections, attachment, etc.

 ![CleanShot 2023-08-07 at 13.06.09@2x](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/fc51317a7be96b20956a2f9a078ee22169f3dfa0.png)

---

<div class="post-metadata">

**Author:** ![briansport13](https://avatars.discourse-cdn.com/v4/letter/b/48db29/32.png) [@briansport13](https://community.miniextensions.com/u/briansport13)\
**Post date:** [August 7, 2023, 6:24am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/13 "2023-08-07T06:24:40Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/4c25a5f59f9fc991d911af13c32203b5cc1d2d87.png)

Make sure the Maps Embed API is enabled

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 7, 2023, 6:30am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/14 "2023-08-07T06:30:45Z")

</div>

Yes mine is enabled, And all the other maps API`s as well

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 7, 2023, 6:33am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/15 "2023-08-07T06:33:42Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/20b4401a4922390340fd8ac0c25a8bd75c462a39.png)

---

<div class="post-metadata">

**Author:** ![briansport13](https://avatars.discourse-cdn.com/v4/letter/b/48db29/32.png) [@briansport13](https://community.miniextensions.com/u/briansport13)\
**Post date:** [August 7, 2023, 6:44am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/16 "2023-08-07T06:44:11Z")

</div>

Other than that, and making sure that if you restrict your API key on the credential page, it includes the Google Map Embed API, I’m not sure what might be causing the problem.

 ![CleanShot 2023-08-07 at 13.38.59@2x](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/86d07ace51062e9e87c479ca5a30850cb1b8938b.png)  
 ![CleanShot 2023-08-07 at 13.41.14@2x](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/e7c57b50bb51baed4c08a5ae9026141116e98c1f.png)

Maybe try to remove the /r, but I don’t think that would matter since it displayed the embed just fine. Mine looks like this though:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/miniextensions/original/1X/20b5955780127aa8ad7dbe5e92aa5a3ace912e53.png)

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 7, 2023, 6:51am UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/17 "2023-08-07T06:51:36Z")

</div>

Yep The embed API was restricted. Its working fine now thank you Brian. You are awesome

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 10, 2023, 1:37pm UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/18 "2023-08-10T13:37:32Z")

</div>

Hi Brian  
Can I please ask for your assistance again?  
I need to add waypoints to the Iframe but Airtable doesnt want to accept it:  
‘\<iframe \r\n width=“620” \r\n height=380" \r\n style=“border:0” \r\n loading=“eager” \r\n allowfullscreen \r\n referrerpolicy=“no-referrer-when-downgrade” \r\n src="[https://www.google.com/maps/embed/v1/directions?key=API&origin=](https://www.google.com/maps/embed/v1/directions?key=API&origin=)’ & SUBSTITUTE(Depot," “,”+“) & ‘&destination=’ & SUBSTITUTE(Depot,” “,”+“) & ‘&waypoints=’ & SUBSTITUTE(From,” “,”+“|To,” “,”+) & ‘"\> \r\n ’

I think it is something to do with the pipe seperation for the waypoints?

---

<div class="post-metadata">

**Author:** ![briansport13](https://avatars.discourse-cdn.com/v4/letter/b/48db29/32.png) [@briansport13](https://community.miniextensions.com/u/briansport13)\
**Post date:** [August 10, 2023, 2:05pm UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/19 "2023-08-10T14:05:56Z")

</div>

> [https://www.google.com/maps/embed/v1/directions?key=API&origin=’](https://www.google.com/maps/embed/v1/directions?key=API&origin=%E2%80%99) & SUBSTITUTE(Depot," “,”+“) & ‘&destination=’ & SUBSTITUTE(Depot,” “,”+“) & ‘&waypoints=’ & SUBSTITUTE(From,” “,”+“) & “|” & SUBSTITUTE(To,” “,”+”) & ‘"\> \r\n’  
> I’m on mobile & replying this by email so I couldn’t really check but this should work since you’re supposed to seperate the Subsitute function for From to To

---

<div class="post-metadata">

**Author:** ![ultimate1984](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.miniextensions.com/ultimate1984/32/185_2.png) [@ultimate1984](https://community.miniextensions.com/u/ultimate1984)\
**Post date:** [August 10, 2023, 3:20pm UTC](https://community.miniextensions.com/t/utilizing-the-new-autocomplete-address-feature-and-automatic-compute-to-display-a-map-of-a-location/446/20 "2023-08-10T15:20:27Z")

</div>

Awesome thank you so much its working 100%