The Kadence Blocks Google Maps block allows designers to embed interactive maps directly into pages and posts, showing locations, driving directions, and other geographic information. The block is simple to use, requiring only an address and a few customization options to generate a fully functional map. However, sometimes the map block displays nothing at all, showing a blank screen, a gray box, or an error message that says “This page can’t load Google Maps correctly.”
This problem can be particularly frustrating because the map block works perfectly during initial setup, and then suddenly stops working without any changes to the page. The address is correct, the map settings are configured properly, and the rest of the page content displays without issues. The most common cause of this problem is that the Google Maps API key is missing, invalid, or has expired, and the Kadence Blocks map block requires a valid API key to function.
Google changed its API policies several years ago to require billing information for all API keys, even for free usage. Many website owners are unaware of this requirement, and they continue using the Kadence Blocks map block without configuring an API key. When no API key is provided, Google Maps will not load, and the map block remains empty. Understanding how to obtain and configure a Google Maps API key is essential for using the Kadence Blocks map block.
Why Kadence Blocks Google Maps fail to display
The Kadence Blocks Google Maps block uses the Google Maps JavaScript API to embed interactive maps on the website. This API requires a valid API key that is associated with a Google Cloud Platform account with billing enabled. Without a valid API key, Google will reject the map loading request, and the map block will display an error message or remain blank. The error message often appears in the browser console and may include details about the missing or invalid key.
Even with a valid API key, the map may fail to load if the API key is restricted to specific domains that do not include the website’s domain. Google allows API key restrictions for security purposes, but if the website’s domain is not added to the restriction list, the map will not load. Similarly, if the required APIs (Maps JavaScript API, Places API, Geocoding API) are not enabled in the Google Cloud Console, the map block will fail.
Another cause of map failure is that the website has reached its daily quota for API requests. Google Maps API has a free tier with a limited number of requests per day, and if the website exceeds that limit, the map will stop loading until the quota resets or until billing is enabled for additional usage. High-traffic websites may need to upgrade to a paid plan to ensure continuous map availability.
How to check if Google Maps API is configured correctly
Open the browser developer tools by pressing F12 and navigate to the Console tab. Reload the page containing the map block and look for error messages related to Google Maps. Common error messages include “This page can’t load Google Maps correctly” and “Google Maps JavaScript API error: MissingKeyMapError.” These errors indicate that the API key is missing or invalid. Also check the Network tab for requests to maps.googleapis.com and look for the API key in the request parameters.
Step by step guide to fixing Kadence Blocks Google Maps
Follow these steps in order to restore Google Maps functionality in Kadence Blocks. The most important step is obtaining and configuring a valid Google Maps API key.
- Go to the Google Cloud Console (console.cloud.google.com) and create a new project
- Enable the Maps JavaScript API, Places API, and Geocoding API for the project
- Create an API key and copy it to the clipboard
- Add billing information to the project (required even for free tier usage)
- Restrict the API key by HTTP referrer to prevent unauthorized use
- Go to Kadence Blocks settings in the WordPress admin dashboard
- Paste the API key into the Google Maps API Key field and save settings
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Test the map block on the frontend of the website
- Monitor usage in Google Cloud Console to stay within free tier limits
How to restrict Google Maps API key for security
In the Google Cloud Console, navigate to APIs & Services → Credentials and click on the API key. Under “Application restrictions,” select “HTTP referrers (web sites).” Add the website domain in the format “https://yourwebsite.com/*” and also add “https://*.yourwebsite.com/*” to cover subdomains. Under “API restrictions,” select “Restrict key” and choose only the APIs needed (Maps JavaScript API, Places API, Geocoding API). Save the changes and wait a few minutes for the restrictions to take effect before testing.
Kadence Blocks Google Maps troubleshooting reference table
Here is a reference table for diagnosing Google Maps problems in Kadence Blocks based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution | Blank screen or gray box instead of map | Missing or invalid API key | Obtain Google Maps API key and enter in Kadence settings | Error message “This page can’t load Google Maps” | API key not properly configured or billing not enabled | Enable billing and ensure required APIs are enabled | Map loads but is blurry or low resolution | Map zoom or style settings incorrect | Adjust map zoom level and style in block settings | Map works on some pages but not others | API key restriction blocking certain domains | Add all domains to API key restriction list |
|---|
For more information about Kadence Blocks Google Maps settings, visit the Kadence Blocks page on wpwizzy.com.
Preventing Kadence Blocks Google Maps problems in the future
Set up a Google Maps API key with proper restrictions as soon as you start using the map block, and monitor API usage regularly to stay within free tier limits. Set up billing alerts in Google Cloud Console to notify you when usage approaches the free tier quota, and consider upgrading to a paid plan if the website receives enough traffic to exceed the free tier. Document the API key configuration for future reference, especially when multiple developers work on the same project.
Test the map block on all pages after making changes to API key settings, and keep Kadence Blocks updated to the latest version to benefit from any API-related fixes. Use a staging website to test API key changes before applying them to the live production site, and regularly check the browser console for Google Maps errors that might indicate API key problems. Consider using an alternative map provider (like OpenStreetMap) if Google Maps API costs become prohibitive for the website.