Google Maps Directions API Key

Design help Data API
1

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.

2

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

image
image1364×47 4.86 KB

3

Where do I find that?

4

Hi @crcdesign,

You can find this on your Dashboard under Integrations.

Shared with CloudApp

Snapshot of where to find.

Please let me know if you have any other questions,

~ Happy Designing ~
Brandon

5

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.