Google Maps Embed Api In Wordpress: Server Rejected Your Request

Question

I've been up half the night on this issue . I've embedded a google map API via iframe into a Wordpress site and I get the error: The Google Maps API server rejected your request. The provided API key is invalid.

Nothing is wrong with my key. I put it in a vanilla html document outside of wordpress and it works great.

Then I've tried setting the sensor to true in the header.php. No difference except more errors from my console:

Failed to load resource: https://www.google.com/maps/embed/v1/place?q=place_id:myplacekey=mykey?wmode=transparent Failed to load resource: the server responded with a status of 403 () **Can't post the rest because I need more reputation

I believe the issue is with the ?wmode=transparent being appended to the end of the key. What might be adding that and how can I remove it?

You cannot use ? twice in url. The second question mark needs to be replaced by &. — KAGG Design
That second question mark ?wmode=transparent is being inserted by some of the WordPress theme files (it is not part of my code) I've also deactivated all the plugins temporarily to eliminate them as the cause. Do you know how I can prevent it from being injected? — Jennifer Mitchell
It is impossible to say without full inspection of your site, so with it I cannot help. Concerning your request. If you will remove ?wmode=transparent, then this request becomes valid google.com/maps/embed/v1/… Google answers "google.com/maps/embed/v1/…" what is normal and means that key is valid. So, you had a problem was just because of "?wmode=transparent" at the end. — KAGG Design
It will be here: nkyspeechandlanguageservices.com/?page_id=61 , Is not in production due to this issue. I went through all the theme files and looked for any reference to an iframe. Didn't find any — Jennifer Mitchell
This page doesnt contain any embedded map. Could you create a separate test page with the map? — KAGG Design

KAGG Design KAGG Design · Accepted Answer · 2016-12-09T16:23:25

The problem is in your theme.

When you look at the page with the map in browser inspector (Elements tab), you can see that link is ended by ?wmode=transparent

Code of the page does not contain ?wmode=transparent, you can see it on Sources tab of inspector:

This means that code of the page is modified by some js script. Browsing scripts in Sources tab, I had found the following:

At line 13 you can see source of your problem. This is some action for Youtube video, which was done by developers with a rough mistake. They add ?wmode=transparent to src of ANY iframe, including Google maps.

I have checked the latest version of theme. Same bug.

What you have to do: just comment line #13 in the file /wp-content/themes/crescent-theme/js/jquery.custom.js and make it like this:

( function( $ ) {

    function modifyPosts() {
        /* Fit Vids ---------------------*/
        $('.feature-vid, .postarea').fitVids();
    }


    //Fix z-index youtube video embedding
    $(document).ready(function (){
        $('iframe').each(function(){
            var url = $(this).attr("src");
            // $(this).attr("src",url+"?wmode=transparent");
        });
    }); 


    $( document )
    .ready( modifyPosts )
    .on( 'post-load', modifyPosts );

})( jQuery );

If you will update theme, you have to comment similar line in the same js file.

Google Maps Embed Api In Wordpress: Server Rejected Your Request

1 Answers