How to Fix Google Maps Not Loading with WP Rocket: Complete Guide

WP Rocket is a powerful caching plugin that optimizes WordPress performance. When integrated with Google Maps, some configurations are needed to ensure smooth functionality. This guide provides all the necessary solutions to get your maps working perfectly while maintaining optimal site speed.

1. WP Config Addition

Add this to your wp-config.php:

Go And edit php:/wp-config.php add this code

define('WP_ROCKET_EXCLUDED_INLINE_JS_CONTENT', 'maps.googleapis.com');

2. Functions.php Additions

Add these functions to your theme’s functions.php:

// Exclude Google Maps from JavaScript defer function exclude_maps_from_defer($excluded_files) { $excluded_files[] = '/maps.googleapis.com'; $excluded_files[] = '/maps.google.com'; return $excluded_files; } add_filter('rocket_exclude_js', 'exclude_maps_from_defer'); // Add DNS prefetch function add_google_maps_dns_prefetch($urls) { $urls[] = '//maps.googleapis.com'; $urls[] = '//maps.gstatic.com'; return $urls; } add_filter('rocket_dns_prefetch', 'add_google_maps_dns_prefetch'); // Exclude Google Maps from combination function exclude_maps_from_combine($excluded_files) { $excluded_files[] = '/maps.googleapis.com'; $excluded_files[] = '/maps.google.com'; $excluded_files[] = '/maps.gstatic.com'; return $excluded_files; } add_filter('rocket_exclude_js_combine', 'exclude_maps_from_combine'); 

3. Header Additions

Add these to your header.php:

4. .htaccess Optimizations

Add these rules to your .htaccess:

# Google Maps Performance Rules  Header append Vary: Accept-Encoding  # Enable Keep-Alive  Header set Connection keep-alive 

Configuration Steps

WP Rocket Settings

1. Navigate to WP Rocket > File Optimization
2. Add these exclusions:

maps.googleapis.com google-maps-api maps.google.com maps.gstatic.com

Google Maps API Settings

1. Enable these services: –

• Maps JavaScript API
• Geocoding API
• Places API
• Maps Embed API

2.API Key Configuration:

// Initialize Google Maps with error handling function initMap() { try { const map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: { lat: YOUR_LAT, lng: YOUR_LNG } }); } catch (e) { console.error('Google Maps initialization failed:', e); } } 

Cache Management Commands

Clear cache after implementing changes:

wp rocket clean 

wp rocket preload 

Performance Optimization Code

Lazy Loading Implementation lazy-maps.js

document.addEventListener('DOMContentLoaded', function() { const mapElements = document.querySelectorAll('.google-map'); const observerOptions = { root: null, rootMargin: '50px', threshold: 0.1 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { loadGoogleMap(entry.target); observer.unobserve(entry.target); } }); }, observerOptions); mapElements.forEach(map => observer.observe(map)); }); function loadGoogleMap(element) { const script = document.createElement('script'); script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap`; script.async = true; document.head.appendChild(script); } 

Error Handling add functions.php

function handle_maps_errors() { ?> ###SCRIPT14### 

Monitoring Implementation functions.php

function monitor_maps_performance() { ?> ###SCRIPT15### 

Best Practices Summary

1. Always use HTTPS
2. Implement proper error handling
3. Monitor performance metrics
4. Regular cache clearing
5. Keep API keys secure
6. Use latest API versions
7. Implement progressive loading
8. Regular testing across devices

Resources

• WP Rocket Documentation: https://docs.wp-rocket.me/
• Google Maps Platform: https://developers.google.com/maps
• WordPress Developer Resources: https://developer.wordpress.org/