This Plugin Breaks Embedded Google Maps (2014)

I think I messed up with posting this in the wrong place. Trying again.

After days of work trying alternatives, I had to go back to using WorPress HTTPS plugin because it does the two things we are after. 1. Forces website visitors to HTTP, 2.) Forces HTTPS for the admin. And while doing these things it doesn’t break much.

Only problem, it’s STILL breaking embeded Google Maps. Instead of the map, blog post just gives error message:

“The Google Maps API server rejected your request. Requests to this API must be over SSL.”

This seems like it must have an easy fix, it must have to do with the plugin forcing http on the visitor side.

If anyone can give me a clue of where I might fix this, I’d sure appreciate.

Thanks, MTN (WordPress 3.9.1, using the new Google Maps)

Am thinking I should probably move on to using Open Street Map. Google Maps seem to have become difficult.

Even so, we have hundreds of embedded Google maps on our blog that are broken if WordPress HTTPS is activated. We don’t have the resources to go back and edit every one of them for conversion to Open Street Map, so I’ll keep searching for a solution so the Google Maps work. My suspicion is that the fix is easy, but mysterious.

Thanks, MTN

Well, this is just crazy, I didn’t do anything I can put a finger on, and suddenly all our Google embedded maps are displaying correctly again — with WordPress HTTPS plugin activated.

In any case, something to keep an eye on for those of you who used embeded Google maps on your blogs.

I’ll mark this as resolved.

Thanks anyone who looked at these messages.

MTN

I noticed today that IF this Plugin is installed, and you embed a Google map on a page, it will show the “The Google Maps API server rejected your request. Requests to this API must be over SSL.” if you do not have the SSL protection checked for the page.

This plugin replaces https sources (src) with non-https.

Here’s my working solution via jquery:

<script>
jQuery(document).ready(function($){
   $('iframe#map').attr("src", $('iframe#map').attr('src').replace("http:","https:") );
});
</script>

@bigneno

How did you get it working? You add the script in header.php?

@zonetrap
You can paste it into header.php or into specific post’s text editor.

Make sure you have jquery library enabled. Change #map to #YourIframeID.

@bigneno
You mind giving me an example of the #iframeid of a google map?

<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d168783.32073634138!2d-113.88947300000001!3d48.624401!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sglacier+outdoor+center!5e0!3m2!1sen!2sus!4v1420634756641" width="600" height="450" frameborder="0" style="border:0"></iframe>

What part of the iframe is the id code?
Thanks

iframe#myid means:

<iframe id="myid" src...

Doesnt work for me, same error.

@bigneno: Nice one, works, thanks a lot!

@zonetrap: I added at the top of the page, no problem at all. Sure your syntax is correct?