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?
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.
Related
I'm trying to add a popup modal to my WordPress website, for this, I added custom elementor code, and the code is executed properly in preview but not working on the live website.
It shows an error in inspect :
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').
[Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113
I used JQuery instead of $ and it works
jQuery(document).ready(function($){
// jQuery code is in here
});
When plugin page load then by default open calendar. So how I hide the by default open calendar.
in Iphone page load calander open. website link
You have :
$(document).ready(function() {
$('#hide_cal').delay(8000).fadeIn(400);
});
buried at the end of:
/wp-content/plugins/appointkart/assets/js/jquery.pickmeup.js
Something like that doesn't even belong in the plugin file. Perform all initiation in a separate js file.
I have a problem with loading google map with the Advanced Custom Field plugin. I make everything like in the instruction on the plugin page here https://www.advancedcustomfields.com/resources/google-map.
I add google-map field in ACF, but on the page where it should be it appears for a second, and then disappears with the inscription "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details." (see the screenshot). Console says that I need to set the Google API key. I guess I also need to modify some strings in .js file from the ACF instruction, but I don't know which ones. May be someone could help.
Thank you in advance.
screenshot
ACF updated the Google Map documentation
You first have to get a Maps API key and make sure you activate the following APIs :
Maps JavaScript API
Geocoding API
Places API
Then register the API key in your functions.php
If using ACF free
function my_acf_google_map_api( $api ){
$api['key'] = 'xxx';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
If using ACF pro
function my_acf_init() {
acf_update_setting('google_api_key', 'xxx');
}
add_action('acf/init', 'my_acf_init');
In my case I had to delete & recreate the field so that it saves correctly.
A solution could be editing the functions.php in your template
//TODO: fix api key for advanced custom field
add_action('acf/fields/google_map/api', function($api){
$api['key'] = '<YOUR_API_KEY>';
return $api;
});
or you can check my article for a complete solution
add this line in your script..replace with your key..
<script src="javascripts/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
<script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>
I have found a couple of different solutions for this issue, but before starting to explain what to do let me remember to you to get a google maps api key.
I followed these instructions because I'm using Listify theme, but I'm pretty sure they can help you regardless the theme you have.
Here my solutions:
frontend
Somewhere (I guess in your functions.php or in your-awesome-widget.php) you should have a line like these
wp_enqueue_script( 'googlemaps_api' );
or
wp_enqueue_script( 'googlemaps' );
the solution I've found is add the key in the script registration before enqueuing it, in this way
wp_register_script('googlemaps', 'http://maps.googleapis.com/maps/api/js?key='.$YOUR_API_KEY, false, '3');
wp_enqueue_script('googlemaps');
Backend
This one is quick and totally dirty because I've read that ACF support is already working on the official solution, so, for me, is not a problem if it will be erased by a plugin update.
Open those two files:
advanced-custom-fields/js/input.min.js
advanced-custom-fields/js/input.js (in theory if you are using the .min version this one is useless)
This piece of code is repeated twice in each file:
google.load('maps', '3', { other_params: $.param(self.api), callback: function(){ ...
change those two occurencies adding the key as querystring, in this way
other_params: $.param(i.api) + 'key=YOUR_API_KEY', callback ...
Et voilá! It should work.
The official page about the topic is here
I hope to have been helpful!
With the current version (4.4) of ACF, you can find functions.php in the template you are using and add this to the end of the code:
function my_acf_google_map_api( $api ){
$api['key'] = 'YOUR_API_KEY';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
Change 'YOUR_API_KEY' to your API KEY generated from Google.
Found this question: Wordpress: media library grid mode infinite loading
And, more recently:
"Currently I am using Enfold child theme but media grid view is not working. Even if I try to get to the grid from any of other places like selecting the featured image its not working."
From: Wordpress grid media is not working
I am having the exact same problem in WordPress (and also using Enfold). I have renamed my plugins folder to plugins.hold, disabling all plugins. I also set the theme to TwentySixteen. Neither of those things worked. The media library list view works -- only the grid view does not. (But, this is vital, since several elements pull the grid view by default with no chance to switch to the list view. This essentially renders those elements useless, as it is impossible to add an image.)
I realize this is more a WP question than a programming question, but I am hoping someone else has seen this and has a suggestion as to how it can be resolved.
I faced same issue on my wordpress site. After the lot of debugging i fixed my problem step by step.
First add given below code your db-config.php
define('SCRIPT_DEBUG', TRUE);
define('WP_DEBUG', TRUE);
define( 'WP_DEBUG_LOG', true );
Then goto /wp-includes/js/wp-util.js files and find the code $.ajax(
options ) on line number 100(depand your wordpress version) insert given below code into your file
deferred.jqXHR = $.ajax( options ).done( function( response ) {
try {
response = JSON.parse(response);
} catch (Exception) {
response = response;
}
Please check your may be resolved.
if you Removed constant from db-config.php
define('SCRIPT_DEBUG', TRUE);
define('WP_DEBUG', TRUE);
define( 'WP_DEBUG_LOG', true );
Then compress your /wp-includes/js/wp-util.js file code and put your compressed code into /wp-includes/js/wp-util.min.js
*change your own risk if your update your wordpress version changed may be lost.
Solution: Check the admin-ajax.php response, if there are non-json return or invalid json return you should investigate where the extra ajax response come from.
I had similar issue recently, after inspecting admin page the admin-ajax.php response contain non json response. It is because my client adding extra code in function.php that somehow append inline to the admin-ajax.php response
I had this issue recently and after trying all suggestion following worked for me.
Add following function in wp-config.php at top most line. If needed after that
than update permalink once.
ob_start();
For me, this happened after moving my site from an NGINX host to Apache. An old .htaccess file was lurking in the /uploads folder, which blocked access to any file in the uploads folder with a referrer that was not was my site (but, the http version, not the current https version). Because NGINX doesn't read .htaccess, this was now suddenly preventing images from being shown in the media grid.
Strangely, the images were showing in the list view. Also, directly requesting images was fine, presumably because that is done without a referrer.
Check the log error file in the wp-admin directory. If the repeating error is something like this
PHP Warning: ini_set () has been disabled for security reasons in
So, disable the ini_set function in your Cpanel (php selector> options> disable functions)
If the php selector option does not appear in your Cpanel, contact your hosting provider to fix this problem
Adding following code to functions.php of theme folder worked for me
add_action('admin_head', 'my_custom_style');
function my_custom_style()
{
echo '<style>
.media-frame.mode-grid .media-toolbar {
height: 60px !important;
}
</style>';
}
I am looking for a way to modify the links on my Wordpress site so it tracks all my 3rd party links.
I was able to find some help with the, how to create the correct tracking code in Google Analytics, but the second part of the process is to add some specific link attributes.
Here is the example which they suggest I replicate:
<'a href="www.blog-hosting-service.com/myBlog" onclick="_gaq.push(['_link', 'www.blog-hosting-service.com/myBlog']); return false;">View My Blog
Does anyone know where I can insert this code link attributes so I can collect the external clicks via Google Analytics?
JQuery would be the best way in my opinion.
// start by getting the current page path (the one you are sending to tracker)
var pathname = window.location.pathname;
// ready handler to change the links on hosts not equal to location host
$(document).ready(function() {
$('a[href^="http://"]').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).click(function(e) {
_gaq.push(['_link', pathname]);
});
});