Streaming live at 10am (PST)

Google Maps Directions API Key

Hey!

So, I have a client website I am working on, they want to be able to use the Google Maps Directions on their website. I noticed that when I create an API and activate the ‘Maps Javascript API’" it works, no problem. The map loads on the website as normal.

However, when I try to utilise ‘Directions API’ I receive the following error message on the live site:

"Oops! Something went wrong.

This page didn’t load Google Maps correctly. See the JavaScript console for technical details."

Is there a workaround to enable this to work on Webflow? This is my first website, so I’m not sure I am doing this the best way.

Here is the share link:
https://preview.webflow.com/preview/kbcwebsite?utm_medium=preview_link&utm_source=dashboard&utm_content=kbcwebsite&preview=0b6c2087ed47b930df3b363d0bed0d18&mode=preview

The map is located in the ‘Visit’ page, halfway down.

Thanks,
Chris.

Make sure to check on the api dashboard that you have authorized your website to use the API:

Where do I find that?

Hi @crcdesign,

You can find this on your Dashboard under Integrations.

Snapshot of where to find.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

Hi all, I wanted to chime in here and say that I had the exact issue. The Google form provides a suggestion of the website URL in this format: .example.com/ This was the cause for this error. I needed to add the full URL in the “Website restrictions, Restrict key usage requests to the specified websites.” field. e.g. www.google.com rather than google.com, which is what I was sort of steered towards by the example provided on the Google API & Service page.