React-google-maps: Async - google is not defined: you should handle this yourself

[ClementParis016]

I've browsed this repository during the entire afternoon and like most people here, I don't have any clue how to deal with the google is undefined error which you get when using the ScriptjsLoader.

I fully understand that this error is obvious since we are asynchronously loading the Google Maps library, but every time someone asks how to solve this problem he is answered to "handle that by himself", and that doesn't help in any way, despite all the respect I have for the job that is being done on this project.

So, does anyone have any idea and could give a hint about how to get the map and other components to work when loading the Google Maps API asynchronously?

[cristiandley]

@ClementParis016 please show me a repo where you show your ScriptjsLoader usage.
Dont be so rude buddy, we all work to make this a good repo :cry:

[ClementParis016]

@cristiandley I didn't meant to be rude, I'm sorry if it's how you feel it. Of course we are all trying to help each other here, I was just a bit upset to see that question was hanging around without real answer :(
I will set up an example in the following days ;)

[rewop]

@ClementParis016 I found only these issues mentioning the problem #244 #196. Did you find more? if so could you mention them?

244 has an example to reproduce it. In that case, they should handle the case in which google is not defined (which could happen in the first render cycles).

The way I would do it is this:

<ScriptjsLoader
        hostname={'maps.googleapis.com'}
        pathname={'/maps/api/js'}
        query={{v: '3', libraries: 'geometry,drawing,places'}}
        loadingElement={
          <div {...this.props} style={{ height: '100%' }}>
            <CircularProgress className='LocationPicker-loading' mode="indeterminate" color="white" size={0.5}/>
          </div>
        }
        containerElement={
          <div style={{height: '100%'}}/>
        }
        googleMapElement={
          <GoogleMap ref='map'
                     zoom={12}
                     defaultCenter={mapCenter}
                     onClick={::this.handleMapClick}>
            {marker}
            <DrawingManager
              circlecomplete={::this.handleCircle}
              defaultDrawingMode={google && google.maps.drawing.OverlayType.CIRCLE}
              defaultOptions={{
                drawingControl: true,
                drawingControlOptions: {
                  position: google && google.maps.ControlPosition.TOP_CENTER,
                  drawingModes: [
                    google && google.maps.drawing.OverlayType.CIRCLE
                  ]
                },
                circleOptions: {
                  fillColor: '#ff0000',
                  fillOpacity: 0.5,
                  strokeWeight: 2,
                  clickable: false,
                  editable: true,
                  zIndex: 1
                }
              }}
            />
          </GoogleMap>
        }
      />

You are sure that the component is rendered again once the map is loaded, because we set a state in the scriptjs callback.

I however admit that it can get ugly, and I don't like my solution either.

I considered not to render GoogleMap component at all, but it wouldn't work as the prop googleMapElement is required.

@ClementParis016 Does this answer the question?

[rewop]

We may find a smart way to access google when not loaded yet.

My idea would be in the direction to make the prop googleMapElement a function called only when google is loaded.

Usually the problem of google is undefined happens because GoogleMap may need constants defined in google. And I cannot think of other cases at the moment.

Any thoughts about it?

[ClementParis016]

@rewop Thanks for your answers. Yes, I encountered this issue while trying to use constants like google.maps.ControlPosition.TOP_CENTER to add a SearchBox inside your googleMapElement for example.

Like you said, using a function could be a good idea. Though, I'm quite new to React so I don't master well the best practices yet.

[miracle2k]

Since the access to googleis a JavaScript level issue, we have to somehow delay access to it.

One obvious way, wrapping GoogleMap inside a custom react component, and passing that to the googleMapElement attribute didn't work last time I tried, because somehow it was insisting on an actual GoogleMap component.

Allowing googleMapElement to be a function is a good fix, but I prefer a different API. What we really want is something to make sure the google maps library is loaded. What happens after that is a different concern. I would suggest:

 <LoadGoogleMapLib query="" loadingElement={...}>
    {(google) => 
        <GoogleMap />
    }
 </LoadGoogleMapLib>

[tomchentw]

We'll provide a HOC approach in 6.0.0. Follows up #318 !