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

admin管理员组

文章数量:1025227

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.

• javascript
• reactjs
• google-places-api
• google-places-autoplete

Share Improve this question Follow edited Sep 29, 2019 at 11:12 uneet7 3,07577 gold badges2727 silver badges4343 bronze badges asked Sep 29, 2019 at 5:46 BadProgrammerBadProgrammer 9933 silver badges88 bronze badges 1

• You can also refer to this answer – uneet7 Commented Sep 29, 2019 at 6:03

Add a ment  | 

1 Answer 1

Sorted by: 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
}

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.

• javascript
• reactjs
• google-places-api
• google-places-autoplete

Share Improve this question Follow edited Sep 29, 2019 at 11:12 uneet7 3,07577 gold badges2727 silver badges4343 bronze badges asked Sep 29, 2019 at 5:46 BadProgrammerBadProgrammer 9933 silver badges88 bronze badges 1

• You can also refer to this answer – uneet7 Commented Sep 29, 2019 at 6:03

Add a ment  | 

1 Answer 1

Sorted by: 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
}

本文标签： javascriptHow to load the Google Places JS API Library in a React ProjectStack Overflow