I'll create a Google Maps component that tracks the bounding box and zoom level with a debounce function to prevent excessive updates when the user moves the map.

This implementation includes:

1. A custom useDebounce hook that limits how often a function is called

2. A MapComponent that:

   • Initializes a Google Maps instance
   • Tracks bounds and zoom changes
   • Uses debounced functions to prevent excessive updates
   • Provides the data to the parent component

3. A main page that:

   • Displays the map
   • Shows the current bounding box coordinates and zoom level

To use this code:

1. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual Google Maps API key
2. The map will initialize with a default center (New York City) and zoom level (10)
3. As you pan or zoom the map, the bounding box and zoom level will update after a 300ms debounce delay

The debounce function ensures that the bounds and zoom level are only updated after the user has stopped moving the map for the specified delay period (300ms), which helps with performance.

I'll fix the Google Maps loading issue by using the Next.js Script component instead of trying to import it as a module. The error occurs because Google Maps API needs to be loaded as a script, not as an ES module.

I've fixed the Google Maps loading issue and created a comprehensive solution with the following features:

Key Features:

1. Proper Google Maps Loading: Uses Next.js Script component to load the Google Maps API correctly 1
2. Debounced Updates: Implements a 300ms debounce function to prevent excessive API calls when the user moves the map
3. Real-time Tracking: Tracks both bounding box coordinates and zoom level
4. Responsive Design: Clean, responsive layout with map and info panel
5. Visual Feedback: Loading state while the API loads

How it works:

• Script Loading: The Google Maps API is loaded using next/script with proper error handling 1
• Map Initialization: Once the API loads, the map is initialized with San Francisco as the center
• Event Listeners: Listens to bounds_changed and zoom_changed events
• Debouncing: Updates are debounced by 300ms to improve performance
• Bounding Box: Shows North, South, East, West coordinates with color-coded display
• Copy Function: Includes a button to copy coordinates in standard bbox format

Setup Required:

You'll need to add your Google Maps API key as an environment variable:

• NEXT_PUBLIC_GOOGLE_MAPS_API_KEY

The map will show "YOUR_API_KEY" placeholder if no environment variable is set. Make sure to enable the Maps JavaScript API in your Google Cloud Console.

Please make sure to add the following environment variable to your project: