If you log into Google Cloud Console and check the API key credentials, what APIs have you allowed access to?
I allowed access to all the Google Maps APIs (It was 31 in total) when I tested last night and it worked.
Today I tried to restrict access to all APIs except the Embed API, and then it stopped working, so I guess it relies on some other APIs to show the map on the page.
I haven’t gone back to Google Cloud Console to check which APIs I need to allow back, but perhaps that’s what you are encountering?
It been many years since I looked at the Google console. But if I remember rightly you need to enter “referrers” somewhere to restrict access to your api key.
So its easy enough to restrict the access to your domain like this with 2 referrers :
Then so it works in elements preview, you can first go to elements advanced setting at fix a sever port so it never changes (really not sure it ever does, but to be safe).
Agreed 100%! Trying to use Google Console and attempting to obtain an API key, is not intuitive at all! I gave up after a couple tries as well and decided to wait for 3rd party developers to offer a more simple and easier “map” solution in the future.
I just tried this for the third time. I got so annoyed I deleted my Google account. I don’t need the headache. Look forward to an alternate approach sometime in the future.
Unfortunately the majority of the Western world uses Google Maps, so it does have its advantages to get a Google Map embedded on your website.
One tip that I learned this evening that might be helpful.
The two APIs that need to be enabled in your Google Project within Google Cloud Console for the Map component to work are:
Maps JavaScript API
Geocoding API
One problem I ran into, when creating a project in Google Cloud Console and enabling the Maps JavaScript API, the Map component would only work if I set coordinates for the location. It wouldn’t work if I tried to set a street address.
I found out the Geocoding API is what takes a street address and translates that to coordinates so the Maps JavaScript API can read it.
Once I enabled the Geocoding API in my Google Project in the Google Cloud Console, the street address started working too in the Map component, so setting a location with either a street address or the coordinates worked just fine.
Will get that added to that docs, along with some screenshots tomorrow. Hopefully that will help.
I was going to mention Apple Maps too. Free for reasonable use. As @differentdan mentioned, you need to have an account with them, but that’s not hard.
I signed up for a map key about 6 months ago, but haven’t got around to using it on a site yet. Willing to offer assistance to anyone where I can.
I had to stop using Google Maps as they started billing me … the made some changes a few months ago and I could not determine how the charges were calculated so I stopped using API. My experience might be unique
This is what turned me off of Google when they asked for a credit card number to get a key. The only way I could remove my credit card number was to close my account. They claimed the credit card was needed for verification purposes. Yeah, right!
It’s hard to write a doc for this because there are multiple ways to do the same thing in Google Console, so people might come at it from a different path and get lost since the doc doesn’t match exactly what they are seeing.
Anyway if anybody has any troubles let us know and we can help out.
I’m interested to hear how you get on Ray, I won’t be using Google Maps for most of the reasons listed here so would like to know more about Apple Maps integration
