Ionic新手集成Google Maps Places SearchBox遇未定义错误求助

Hey there! As someone who's stumbled through similar Ionic + Google Maps hurdles, let's break down why you're seeing this error and how to fix it step by step.

Common Causes & Solutions #

1. Google Maps Script Isn't Loaded Before Your Code Runs #

The most likely culprit is that your ngOnInit (or initAutocomplete) is firing before the Google Maps Places library finishes loading. Adding the script tag directly in index.html doesn't guarantee it'll be ready when your component initializes.

Fix: Load the Script Asynchronously in Your Component

Instead of relying on the global script tag, dynamically load the Google Maps script in your MapPage and wait for it to finish before initializing the SearchBox. Here's how:

import { OnInit } from '@angular/core';

export class MapPage implements OnInit {
  // Declare google to avoid type errors (or install @types/googlemaps later)
  declare var google: any;

  ngOnInit() {
    // Wait for the script to load before initializing autocomplete
    this.loadGoogleMapsScript().then(() => {
      this.initAutocomplete();
    }).catch(err => {
      console.error('Failed to load Google Maps:', err);
    });
  }

  private loadGoogleMapsScript(): Promise<void> {
    return new Promise((resolve, reject) => {
      // Check if script is already loaded
      if (typeof google !== 'undefined' && google.maps?.places) {
        resolve();
        return;
      }

      // Create and append the script tag
      const script = document.createElement('script');
      // Replace YOUR_API_KEY with your actual key, and ensure no hidden characters in libraries=places
      script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=places&sensor=false';
      script.onload = () => resolve();
      script.onerror = () => reject(new Error('Google Maps script failed to load'));
      document.body.appendChild(script);
    });
  }

  initAutocomplete() {
    const input = document.getElementById('your-search-input') as HTMLInputElement;
    const searchBox = new google.maps.places.SearchBox(input);
    // Rest of your autocomplete logic...
  }
}

2. Your Google API Key Isn't Properly Configured #

Even if the script loads, you might get this error if:

• Your API key doesn't have the Places API enabled in the Google Cloud Console.
• The key has restrictive settings (like HTTP referrers) that block your Ionic app's domain (or localhost for local development).

Fix: Verify API Key Settings

1. Open the Google Cloud Console for your project.
2. Navigate to APIs & Services > Library, search for "Places API", and confirm it's enabled.
3. Go to APIs & Services > Credentials, select your API key, and adjust restrictions to allow your app's access (for local dev, add http://localhost:* as a valid referrer).

3. Hidden Characters in Your Script URL #

Looking at your original script tag: libraries=places‌​ has an invisible special character after "places" (probably from copying/pasting). This makes Google's server ignore the places library request, so google.maps.places never gets loaded.

Fix: Clean Up the Script URL

Use this clean version of the script URL (no hidden characters):

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.exp&libraries=places&sensor=false"></script>

4. Add Type Definitions for Better Development #

To avoid type-related warnings and get better IDE support, install the Google Maps type definitions:

npm install @types/googlemaps --save-dev

Then, you can remove the declare var google: any; line if you add googlemaps to the types array in your tsconfig.json:

{
  "compilerOptions": {
    "types": ["googlemaps"]
  }
}

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