javascript - Reactjs react-google-maps undefined - Stack Overflow

admin管理员组

文章数量:1343311

I am working with the react-google-maps package and . I have an error that says:

./src/App.js Line 31:  'google' is not defined  no-undef  Line 32:  'google' is not defined  no-undef  Line 37:  'google' is not defined  no-undef Line 42:  'google' is not defined  no-undef Line 44:  'google' is not defined  no-undef

and heres my line in the error:

 state = {
    origin: new google.maps.LatLng(41.8507300, -87.6512600),
    destination: new google.maps.LatLng(41.8525800, -87.6514100),
    directions: null,
}

ponentDidMount() {
    const DirectionsService = new google.maps.DirectionsService();

    DirectionsService.route({
        origin: this.state.origin,
        destination: this.state.destination,
        travelMode: google.maps.TravelMode.DRIVING,
    }, (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
            this.setState({
                directions: result,
            });
        } else {
            console.error(`error fetching directions ${result}`);
        }
    });
}

all the 'google' thing is error.

I am working with the react-google-maps package https://github./tomchentw/react-google-maps and https://www.npmjs./package/react-google-maps. I have an error that says:

./src/App.js Line 31:  'google' is not defined  no-undef  Line 32:  'google' is not defined  no-undef  Line 37:  'google' is not defined  no-undef Line 42:  'google' is not defined  no-undef Line 44:  'google' is not defined  no-undef

and heres my line in the error:

 state = {
    origin: new google.maps.LatLng(41.8507300, -87.6512600),
    destination: new google.maps.LatLng(41.8525800, -87.6514100),
    directions: null,
}

ponentDidMount() {
    const DirectionsService = new google.maps.DirectionsService();

    DirectionsService.route({
        origin: this.state.origin,
        destination: this.state.destination,
        travelMode: google.maps.TravelMode.DRIVING,
    }, (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
            this.setState({
                directions: result,
            });
        } else {
            console.error(`error fetching directions ${result}`);
        }
    });
}

all the 'google' thing is error.

• javascript
• google-maps
• reactjs
• google-maps-api-3
• maps

Share Improve this question Follow edited Aug 18, 2017 at 2:30 Deee asked Aug 18, 2017 at 2:13 DeeeDeee 42922 gold badges1010 silver badges2727 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

the answer is I didnt include this line /* global google */ to the top of my file.

If google is not defined, than you didn't load Google Maps API correctly. As explained in react-google-maps's README, put this in your HTML before your React ponent code loads:

<script src="https://maps.googleapis./maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE"></script>

you can also just include window reference to resolve the error, at least with default create-react-app config it does

new window.google.maps.LatLng(41.8507300, -87.6512600)

本文标签： javascriptReactjs reactgooglemaps undefinedStack Overflow