Back to DigiBlocks

Google Maps Not Loading

Google Maps not displaying in your DigiBlocks Google Map block can be frustrating. This guide covers the most common causes and their solutions to get your maps working properly.

Common Symptoms

  • Empty space where the map should appear
  • Gray box instead of the map
  • Error messages in the browser console
  • Map loads but doesn’t display markers
  • “For development purposes only” watermark appears

API Key Issues

Missing or Invalid API Key

The most common reason for Google Maps not loading is a missing or incorrect API key.

To check and configure your API key:

  1. Go to DigiBlocks > Settings in your WordPress admin
  2. Scroll down to Google Maps API Settings
  3. Verify that you have entered a valid API key in the Google Maps API Key field
  4. If the field is empty, you need to create an API key

To create a new Google Maps API key:

  1. Visit the Google Cloud Console
  2. Create a new project or select an existing one
  3. Enable the Maps JavaScript API
  4. Go to Credentials and click Create Credentials > API Key
  5. Copy the generated API key
  6. Paste it into the DigiBlocks settings

API Key Restrictions

Your API key might be restricted to specific domains or IP addresses.

To check API key restrictions:

  1. Go to Google Cloud Console
  2. Navigate to APIs & Services > Credentials
  3. Click on your API key
  4. Under Application restrictions, ensure your website domain is listed
  5. Under API restrictions, make sure Maps JavaScript API is enabled

Billing and Quota Issues

Google Cloud Billing Not Enabled

Google Maps requires billing to be enabled, even for the free tier.

To enable billing:

  1. Go to Google Cloud Console
  2. Navigate to Billing
  3. Link a payment method to your project
  4. Even with billing enabled, you get $200 of free usage per month

API Quota Exceeded

If you’ve exceeded your daily quota, maps will stop loading.

To check your usage:

  1. Go to Google Cloud Console
  2. Navigate to APIs & Services > Dashboard
  3. Click on Maps JavaScript API
  4. Review your usage statistics and quotas

Browser Console Debugging

The browser console often provides specific error messages about why maps aren’t loading.

To check for errors:

  1. Open your webpage with the Google Map block
  2. Press F12 or right-click and select Inspect
  3. Go to the Console tab
  4. Look for errors related to Google Maps

Common Console Errors

“Google Maps JavaScript API error: MissingKeyMapError”

  • Solution: Add a valid API key in DigiBlocks settings

“Google Maps JavaScript API error: InvalidKeyMapError”

  • Solution: Check that your API key is correct and not restricted

“Google Maps JavaScript API error: RefererNotAllowedMapError”

  • Solution: Add your domain to the API key restrictions

“You have exceeded your daily request quota for this API”

  • Solution: Enable billing or wait for the quota to reset

Plugin Configuration Issues

JavaScript Loading Order

Sometimes the Google Maps API doesn’t load in the correct order.

To verify the API is loading:

  1. View your page source
  2. Look for a script tag containing maps.googleapis.com/maps/api/js
  3. Ensure it includes your API key parameter

Cache Plugin Conflicts

Caching plugins can sometimes interfere with Google Maps loading.

To test for cache conflicts:

  1. Temporarily disable all caching plugins
  2. Clear your browser cache
  3. Test if the map loads
  4. If it works, re-enable caching plugins one by one to identify the culprit

Theme and Plugin Conflicts

JavaScript Conflicts

Other plugins or themes might interfere with Google Maps JavaScript.

To test for conflicts:

  1. Switch to a default WordPress theme (like Twenty Twenty-Four)
  2. Deactivate all other plugins except DigiBlocks
  3. Test if the map loads
  4. If it works, reactivate plugins one by one to identify the conflict

CSS Conflicts

Sometimes CSS from your theme can hide or break the map display.

To check for CSS issues:

  1. Inspect the map container element
  2. Look for CSS properties like display: none or visibility: hidden
  3. Check if the container has proper height and width

Map ID Configuration

If you’re using advanced Google Maps features, you might need a Map ID.

To configure Map ID:

  1. Create a Map ID in Google Cloud Console
  2. Go to DigiBlocks > Settings
  3. Enter the Map ID in the Default Map ID field
  4. This is optional for basic maps but required for advanced styling

Testing and Verification

Simple Test

  1. Create a new page or post
  2. Add a Google Map block
  3. Set a simple address like “New York, NY”
  4. Preview the page

API Key Validation

You can test your API key directly by visiting this URL in your browser (replace YOUR_API_KEY with your actual key):

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=console.log

If the API key is valid, you should see JavaScript code load without errors.

Regenerating Assets

Sometimes clearing and regenerating DigiBlocks assets can resolve loading issues.

To regenerate assets:

  1. Go to DigiBlocks > Settings
  2. Click Regenerate All Assets
  3. Wait for the process to complete
  4. Test your maps again

Additional Considerations

HTTPS Requirement

Google Maps requires your website to be served over HTTPS in production. If you’re using HTTP, maps might not load properly.

Mobile Device Testing

Test your maps on mobile devices as well, as some issues only appear on mobile browsers.

Network Connectivity

Ensure your server can make outbound requests to Google’s servers, as some hosting providers block external API calls.

If you’ve tried all these solutions and your Google Maps still aren’t loading, the issue might be more complex and could require examining your specific setup and error messages in detail.

Similar Articles

Back to DigiBlocks