CODEWITHSUNDEEP
reactjsgoogle-maps
SomethingsGottaGive
SomethingsGottaGive

Reputation: 1894

react-google-maps "'google' is not defined" error

I am creating a web that utilizes react-google-maps and I am getting a bunch of undefined errors. I am new to react/js world so any help would be much appreciated. Here's the exact errors:

Failed to compile.

./src/App.js
  Line 23:  'lifecycle' is not defined  no-undef
  Line 25:  'google' is not defined     no-undef
  Line 28:  'google' is not defined     no-undef
  Line 29:  'google' is not defined     no-undef
  Line 30:  'google' is not defined     no-undef
  Line 32:  'google' is not defined     no-undef

Here's the code:

import React, { Component } from 'react';
import './App.css';
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
const MapWithDirections = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `800px`, width: '800px'}} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap,
    lifecycle({
        componentDidMount() {
            const DirectionsService = new google.maps.DirectionsService();

            DirectionsService.route({
                origin: new google.maps.LatLng(45.29233869999999, -70.06117489999997),
                destination: new google.maps.LatLng(45.3570637, -70.06257679999999),
                travelMode: google.maps.TravelMode.DRIVING,
            }, (result, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    this.setState({
                        directions: result,
                    });
                } else {
                    console.error(`error fetching directions ${result}`);
                }
            });
        }
    })
)((props) =>
    <GoogleMap
        defaultZoom={8}
        defaultCenter={{ lat: -34.397, lng: 150.644 }}
    >
        {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
    </GoogleMap>
)


class App extends Component {
  render() {
    return (
      <div className="App">
          <MapWithDirections/>
      </div>
    );
  }
}

export default App;

It looks like I am failing to properly import google maps but looking at the example, it shouldn't have to. Any ideas?

Upvotes: 16

Views: 22296

Answers (4)

AndresSp
AndresSp

Reputation: 364

I don't know why, but with Angular and React you need to add a script tag for this kind of libraries, like this:

<body>
...
    <script src="https://maps.googleapis.com/maps/api/js?key=<API KEY>&callback=init"
    async defer></script>
</body>

If you check inside, you can find a definition to window.google:

window.google = window.google || {};

You will need to use window.google instead this.props.google in this case.. I will try to find a better way to use the library, but this is my contribution to this unknown problem...

Upvotes: 3

Hasith Lakshan
Hasith Lakshan

Reputation: 3

I have to face this problem when I try to draw a circle in google map component so I create for the map component and I handle that problem in componentDidUpdate with using try-catch because it runs much time when the component render. thanks

    componentDidUpdate() {
        const { map, cir1, cir2, vertical } = this._generateProps()
        const { center } = vertical ? this._generateProps() : this.state
        circle1 ? circle1.setMap(null) : null
        circle2 ? circle2.setMap(null) : null
        if (cir1) {
            try {
                circle1 = new google.maps.Circle({
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 0,
                    fillColor: "#f5a623",
                    fillOpacity: 0.35,
                    map,
                    center,
                    radius: 450
                })
            }
            catch (e) {
                console.log(e)
            }

        }
        if (cir2) {
            try {
                circle2 = new google.maps.Circle({
                    strokeColor: "#f4ff10",
                    strokeOpacity: 0.16,
                    strokeWeight: 0,
                    fillColor: "#4a90e2",
                    fillOpacity: 0.3,
                    map,
                    center,
                    radius: 800
                })
            }
            catch (e) {
                console.log(e)
            }

        }
    }

Upvotes: -1

phan kosal
phan kosal

Reputation: 461

You can try this new window.google.maps

It works for me!

Example:

<Marker
  icon={{
    url:"../../assets/img/carz.png",
    anchor: new window.google.maps.Point(10, 10),
    scaledSize: new window.google.maps.Size(20, 20)
  }}
/>

Upvotes: 20

Rohith Murali
Rohith Murali

Reputation: 5669

You have missed the import of both lifecycle and google. In the example you can see,

const { compose, withProps, lifecycle } = require("recompose");

and the import of google is not mentioned in the example but that too should be imported.

Regarding importing google, it's to do with eslint validation not JS. do the following change:

PlacesAutocomplete.js Line 1:

/*global google*/

^ this will declare to eslint that google is a global name and will be available at runtime. For more info you can go thru this git page

Upvotes: 6

Related Questions