Google地图Geocoding API报错：ReferenceError: google is not defined求助

Hey there! Let’s work through that frustrating "google is not defined" error you’re seeing. This is super common when working with Google Maps APIs, and it almost always comes down to timing—your custom JavaScript code is trying to use the google object before the Google Maps script has finished loading completely. Here’s how to fix it step by step:

1. Use the Google Maps API’s Callback Parameter (Most Reliable Fix) #

The best way to ensure your code runs only after the Maps API is fully initialized is to use the callback parameter in the script tag that loads the API. This tells Google’s servers to trigger a specific function once everything is ready.

Example Setup: #

<!-- Load Google Maps API first, with your key and callback -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

<!-- Your custom JavaScript -->
<script>
  // This function runs ONLY after the Google Maps API is loaded
  function initMap() {
    // Now you can safely access the google object
    const geocoder = new google.maps.Geocoder();
    
    // Put all your geocoding logic here, or call other functions that use google
    geocodeMyAddress(geocoder);
  }

  function geocodeMyAddress(geocoder) {
    const address = "1600 Amphitheatre Parkway, Mountain View, CA"; // Replace with your target address
    geocoder.geocode({ address: address }, (results, status) => {
      if (status === google.maps.GeocoderStatus.OK) {
        const lat = results[0].geometry.location.lat();
        const lng = results[0].geometry.location.lng();
        console.log(`Coordinates: ${lat}, ${lng}`);
        // Add your Google Maps integration code here (e.g., placing a marker)
      } else {
        console.error("Geocoding failed: ", status);
      }
    });
  }
</script>

2. Double-Check Your Script Loading Order #

Make sure the Google Maps API script tag comes before any custom JavaScript that uses the google object. If your custom JS is in an external file, load that file after the Maps API script:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script src="/path/to/your/custom-script.js"></script>

3. Verify Your API Setup #

Don’t forget these quick checks:

• Ensure your API key is valid and has the Geocoding API and Maps JavaScript API enabled in the Google Cloud Console.
• Confirm there are no typos in your API script URL (e.g., missing js in the path, or incorrect parameters).

4. Avoid Running Code Before Initialization #

Never try to access google directly outside of the callback function or without waiting for the API to load. For example, this will always throw an error:

<!-- ❌ BAD: Runs before Google Maps is loaded -->
<script>
  const geocoder = new google.maps.Geocoder(); // Throws ReferenceError!
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

By wrapping all your google-dependent code in the callback function, you guarantee that the API is fully ready before your code executes. This should resolve the "google is not defined" error and let you use the Geocoding API with Google Maps smoothly.

内容的提问来源于stack exchange，提问作者Xnitor