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

CleanShot 2023-08-04 at 11.19.29

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
  2. Formula Field with HTML compute enabled
'<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>'

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

3 Likes

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.

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

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?

You absolutely could! Use this formula instead:

'<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.

1 Like

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. I hope you guys can fulfill my request. :slightly_smiling_face:

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

I will use the feature
in last mile delivery service

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!

Hi Brian, I get this message from google

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?

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.

Make sure the Maps Embed API is enabled

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

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.


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:

1 Like

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

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=’ & 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?

https://www.google.com/maps/embed/v1/directions?key=API&origin=’ & 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

1 Like

Awesome thank you so much its working 100%