Embedding Google Maps produces an error

[philipschilling]

Bug Description

I tried to add different Google Maps links: Browser URL: https://www.google.com/maps/place/Lucerne/@47.0408791,8.1524424,11z/data=!3m1!4b1!4m6!3m5!1s0x478ffa2a79547379:0xaef02ad1409952af!8m2!3d47.0501682!4d8.3093072!16zL20vMDE5NGY1?entry=ttu Share Link: https://maps.app.goo.gl/XXoGtVj8gbKiFUYm8 Iframe Embed Link: https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d174013.88549188594!2d8.152442372466021!3d47.040879120308134!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478ffa2a79547379%3A0xaef02ad1409952af!2sLucerne!5e0!3m2!1sen!2sch!4v1712835644597!5m2!1sen!2sch

All links produce this error: Could not retrieve embed information.

Also I found this StackOverflow Question. Is it possible that Embedded Assets doesn't work any more with the new Google link structure?

Steps to reproduce

1. Open Assets
2. Click Embed Button
3. Add Google Maps link (Browser Link, Share link, Iframe Embed link)
4. The error message as in the above screenshot pops up

P.S. Only for the Google Maps share link I could add the map but no information could be retrieved. I am not using https on the test environment which could be the reason (Added: I switched the control panel to https but get the same error message):

Expected behaviour

I would like to add maps with all details in a JSON file to the assets folder.

Embedded Assets version

5.0.1

Craft CMS version

Craft Solo 5.0.3

[ttempleton]

Adding the first link works for me:

Have you added a valid Google Maps API key to the Embedded Assets plugin settings?

[philipschilling]

Initially, I haven't added a Google Maps API Key as I thought it would be optional and only necessary later when the website has been published. I have done so now but still get the error. I had also removed all API restrictions in Google Cloud Console without change. Which Google APIs is the plugin using?

I have also started setting up an OAuth consent screen which Google asked me. The publishing status is "Testing". I didn't publish it because Google asked for so many requirements and I am not sure if it is necessary to get the Google Maps API working.

When I try Open Street Maps, I get a different error: This information is coming from an untrusted source. As a security measure embed codes will not be shown.

[ttempleton]

You might need to clear Craft's data caches for the Google Maps embed to work. If that doesn't work - are there any JavaScript or network errors showing in the browser console?

Open Street Map doesn't currently return embed code even when the domain is whitelisted, but I should be able to write an extractor for it.

[philipschilling]

I cleared all CraftCMS caches and tried again. The issue seems to be related with my SSL-setup. I don't get an error in inspector console on other pages but only when the oEmbed field is embedded. I think the lines 2 & 3 indicate why it is not working:

I am also using Htpasswd-protection which shouldn't be an issue, I assume. Regarding the SSL-Setup I am using the CloudFlare Flexible Mode because I haven't installed an SSL certificate on my origin server:

[philipschilling]

I also received this email but I do not know what triggered it except that I configured notifications in the plugin:

[philipschilling]

I was searching again for a solution. What I found is that Google set the X-Frame-Options to SAMEORIGIN which prevents my site from pulling the map. I do not have any influence over the setting because it is sent in the document header. You wrote initially that it is working in your control panel. Is it a general issue or just an issue I have and which I need to fix on my side?

[ttempleton]

It might be an environmental issue, although I'm not totally convinced yet - might just be that I'm missing something about how to trigger the error.

Do the Craft logs or elsewhere in the browser console shed any light on the cause of the 500 error?

Does it work as expected if tried in another environment, e.g. in your development environment if that's not where you're already experiencing the error?

[philipschilling]

The issue has probably something to do with Google API Credentials which I added correctly into the control panel of the plugin. The error happens most likely because Google does not support embedding via iFrame without API credentials any more.

In /storage/logs I haven't found a log file for the plugin. I have only setup a development environment which I am using at the moment.

I have now installed another Google Maps plugin which has been working for me and which I will continue to use.

[ttempleton]

Glad you've found a solution for Google Maps that works for you.

I do want to point out that I don't believe the 500 error would be caused by Google disallowing embedding an iframe without an API key; trying to embed a Google map without an API key would result in an embedded asset preview loading, with the embedded map request resulting in a 401 error, looking something like this:

So I think there is a separate issue here and potential bug in the plugin, and I'm going to leave the issue open for now.

[laurabennett]

The error seems to be with Google's share link. Using the url from the browser bar looks good (once I got the API key).

[ttempleton]

Thanks for that @laurabennett - fixed now in 4.1.1 and 5.1.1.