最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - How to load the Google Places JS API Library in a React Project? - Stack Overflow

matteradmin2PV0评论

I am using the 'react-places-autoplete' library. I understand that I have to load the API using my key. I can't figure out where to place the script for the key such that the program will work.

I saw a StackOverflow page where someone said to load it statically in index.js, which I tried:

import 'react-places-autoplete';
...
ReactDOM.render(
    <div>
    <BrowserRouter>
        <App />
    </BrowserRouter>
    <script src="? 
     key=MY_KEY&libraries=places"></script>
    </div>
    , document.getElementById('root'));

This doesn't work, I also tried to load it directly in the ponent (Which doesn't seem correct):

class My_Component extends React.Component {

...

render() {
    return (
        <div>
            <script src="? 
     key=MY_KEY&libraries=places"></script>
            <PlacesAutoplete
                value={this.state.address}
                onChange={this.handleChange}
                onSelect={this.handleSelect}
            >

         ....

         </div>
        );
    }
}

Using these approaches I keep getting the "Google Maps JavaScript API library must be loaded" error, and I have looked at the documentation and it doesn't specify where the tag needs to be placed, just that it needs to be somewhere.

I am using the 'react-places-autoplete' library. I understand that I have to load the API using my key. I can't figure out where to place the script for the key such that the program will work.

I saw a StackOverflow page where someone said to load it statically in index.js, which I tried:

import 'react-places-autoplete';
...
ReactDOM.render(
    <div>
    <BrowserRouter>
        <App />
    </BrowserRouter>
    <script src="https://maps.googleapis./maps/api/js? 
     key=MY_KEY&libraries=places"></script>
    </div>
    , document.getElementById('root'));

This doesn't work, I also tried to load it directly in the ponent (Which doesn't seem correct):

class My_Component extends React.Component {

...

render() {
    return (
        <div>
            <script src="https://maps.googleapis./maps/api/js? 
     key=MY_KEY&libraries=places"></script>
            <PlacesAutoplete
                value={this.state.address}
                onChange={this.handleChange}
                onSelect={this.handleSelect}
            >

         ....

         </div>
        );
    }
}

Using these approaches I keep getting the "Google Maps JavaScript API library must be loaded" error, and I have looked at the documentation and it doesn't specify where the tag needs to be placed, just that it needs to be somewhere.

Share Improve this question edited Sep 29, 2019 at 11:12 uneet7 3,0757 gold badges27 silver badges43 bronze badges asked Sep 29, 2019 at 5:46 BadProgrammerBadProgrammer 993 silver badges8 bronze badges 1
  • You can also refer to this answer – uneet7 Commented Sep 29, 2019 at 6:03
Add a ment  | 

1 Answer 1

Reset to default 6

I have used it this way in one of my project

class PlacesAutoplete1 extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    googleMapsReady: false,
  };
}

ponentDidMount() {
    script is loaded here and state is set to true after loading
    this.loadGoogleMaps(() => {
    // Work to do after the library loads.
    this.setState({ googleMapsReady: true });
  });
}

ponentWillUnmount() {
  // unload script when needed to avoid multiple google scripts loaded warning
  this.unloadGoogleMaps();
}

loadGoogleMaps = callback => {
    const existingScript = document.getElementById("googlePlacesScript");
    if (!existingScript) {
        const script = document.createElement("script");
        script.src =
            "https://maps.googleapis./maps/api/js?key=YOUR_KEY&libraries=places";
        script.id = "googleMaps";
        document.body.appendChild(script);
        //action to do after a script is loaded in our case setState
        script.onload = () => {
            if (callback) callback();
        };
    }
    if (existingScript && callback) callback();
};

unloadGoogleMaps = () => {
    let googlePlacesScript = document.getElementById("googlePlacesScript");
    if (googlePlacesScript) {
        googlePlacesScript.remove();
    }
};

render() {
    if (!this.state.googleMapsReady) {
        return <p>Loading</p>;
    }
    return (
        // do something you needed when script is loaded
}
Post a comment

comment list (0)

  1. No comments so far