CODEWITHSUNDEEP
wordpressapigoogle-mapsmaps
Jennifer Mitchell
Jennifer Mitchell

Reputation: 3

Google Maps Embed Api In Wordpress: Server Rejected Your Request

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?

Upvotes: 0

Views: 1089

Answers (1)

KAGG Design
KAGG Design

Reputation: 1945

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 Elements tab in inspector

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

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

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.

Upvotes: 1

Related Questions