Troubleshooting Google Maps Not Displaying in Shortcodes Ultimate

Many users of the 'WP Shortcodes Plugin — Shortcodes Ultimate' rely on the [su_gmap] shortcode to embed maps on their WordPress sites. A common and frustrating issue is when the map fails to load, showing a blank space, a broken link icon, or an error message like "maps.google.com refused to connect." This guide will explain the primary cause of this problem and walk you through the most effective solutions.

Why Your Google Map Isn't Showing

The root cause for nearly all recent Google Maps display issues is a missing API key. In the past, the plugin could embed a simple Google Maps iframe without one. However, Google now enforces stricter security and usage policies, requiring a valid API key for all maps embedded on websites. Without this key, Google's servers will refuse to serve the map data, resulting in a connection error or a blank frame.

The error message "Refused to display 'https://maps.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'" is a clear indicator of this API key requirement.

How to Fix It: Adding Your Google API Key

Since the 'WP Shortcodes Plugin — Shortcodes Ultimate' does not have a built-in settings page for an API key, you need to add the key using a small code snippet placed in your theme's functions.php file.

1. Get a Google Maps API Key:
   • Go to the Google Cloud Platform Console.
   • Create a new project or select an existing one.
   • Enable the "Maps JavaScript API" for your project.
   • Create an API key from the credentials page.
   • (Recommended) Restrict the key to your website's domain (e.g., example.com) to prevent unauthorized use.
2. Add the Key to Your WordPress Site:

   Copy the following code snippet. Replace YOUR_API_KEY_HERE with the actual key you generated.

   function su_google_maps_api_key( $key ) {
       return 'YOUR_API_KEY_HERE';
   }
   add_filter( 'su/shortcode/gmap/api_key', 'su_google_maps_api_key' );
   

   Warning: Always use a child theme when modifying theme files. Add this code to your child theme's functions.php file. Adding it directly to a parent theme will erase the change when the theme updates.

3. Save the file and clear your website's cache (if you use a caching plugin). Your maps should now load correctly.

Other Common Issues and Solutions

1. Map Dimensions (Width/Height) Are Ignored

If the width and height attributes in your shortcode seem to be ignored, it is likely due to your theme's CSS or the plugin's responsive design settings.

• Solution: Try adding responsive="no" to your shortcode. If the dimensions are then respected, you can use custom CSS to style the map container for responsiveness yourself.

2. Map Pins Not Appearing for Generic Addresses

When adding multiple addresses, some pins may not appear if Google Maps cannot precisely interpret the location.

• Solution: Use more specific addresses. For example, use "Kuwait City" instead of just "Kuwait." The plugin passes the address string directly to Google, so the more accurate the address, the better the result.

3. Using a Full Google Maps URL

The address parameter is designed for a physical location, not a full Google Maps URL.

• Solution: Only use a street address, city, or country in the address parameter. For example, use address="Carrer Girona, 173, Barcelona, spain" instead of a long maps.google.com link.

4. Page Speed and Loading Delays

The Google Maps script can sometimes impact page load times.

• Solution: The maps are loaded in an iframe, and there is no built-in setting to load them asynchronously. For advanced users, one potential workaround is to lazy load the iframe using a JavaScript library, but this requires custom development beyond the plugin's standard functionality.

By following these steps, you should be able to resolve the most common issues preventing your Google Maps from displaying correctly with the Shortcodes Ultimate plugin.