I am experiencing issues with the Google Maps JavaScript API in my Next.js application. When I zoom in on the map, I receive the message “Sorry, we have no imagery here” and the map turns grey. Checking the network tab in the developer tools, I see the error (failed) net::ERR_BLOCKED_BY_ORB.

Here are the details:

1. Problem Description:

   • When the map is zoomed out, everything works fine and the map is displayed correctly.
   • When I zoom in, the map turns grey and shows the message “Sorry, we have no imagery here”.
   • The network tab shows the error: (failed) net::ERR_BLOCKED_BY_ORB.

2. Environment Details:

   • Next.js application
   • .env.local file:

     NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_actual_api_key_here
     

   • loader.js:

     import { Loader } from '@googlemaps/js-api-loader';
     
     const loader = new Loader({
       apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
       version: 'weekly',
       libraries: ['places'], // Add any necessary libraries
     });
     
     export default loader;
     

   • MapComponent.jsx:

     import { useEffect, useRef } from 'react';
     import loader from '../path/to/loader'; // Adjust path as needed
     
     const MapComponent = () => {
       const mapRef = useRef(null);
     
       useEffect(() => {
         loader.load().then(() => {
           if (mapRef.current) {
             new google.maps.Map(mapRef.current, {
               center: { lat: -34.397, lng: 150.644 },
               zoom: 8,
             });
           }
         });
       }, []);
     
       return <div id="map" ref={mapRef} style={{ height: '500px', width: '100%' }} />;
     };
     
     export default MapComponent;
     

   • next.config.js:

     const withSvgr = (nextConfig = {}) => ({
       ...nextConfig,
       webpack(config, options) {
         config.module.rules.push({
           test: /.svg$/i,
           issuer: /.[jt]sx?$/,
     
           use: [
             options.defaultLoaders.babel,
             {
               loader: '@svgr/webpack',
             },
           ],
         });
     
         if (typeof nextConfig.webpack === 'function') {
           return nextConfig.webpack(config, options);
         }
     
         return config;
       },
     });
     
     /** @type {import('next').NextConfig} */
     const nextConfig = {
       experimental: {
         appDir: true,
       },
       env: {
         NEXT_PUBLIC_GOOGLE_MAPS_API_KEY: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
       },
     };
     
     module.exports = withSvgr(nextConfig);
     

3. Additional Information:

   • The issue occurs only when zooming in. When the map is zoomed out, it displays correctly.
   • The network tab shows 404 errors for certain map tiles with the status “NOT_FOUND”.

Has anyone else encountered this issue? What might be causing the map to fail when zoomed in, and how can I resolve it?

Any insights or suggestions would be greatly appreciated. Thank you!

What I Have Tried:

• Verified that my API key is correct and active.
• Checked that the necessary APIs (e.g., Maps JavaScript API) are enabled in the Google Cloud Console.
• Ensured that there are no restrictions (HTTP referrer or IP address) on the API key that would prevent its usage.
• Implemented CORS settings on my server to allow requests from all origins.
• Attempted to load the map in multiple browsers with the same result.