React-google-maps: How to use Autocomplete and other components from Google Maps v3?

[JarLowrey]

I asked this question on SO which hasn't gotten much traction, hopefully someone here can help out.

I have my map setup, and want to include google autocomplete (maybe setup via react-places-autocomplete, but willing to change if something is easier). When I use withScriptjs and/or withGoogleMap to async load my react-google-maps this component, PlacesAutocomplete cannot initialize as it does not see Google Maps v3 as loaded.

Below is how I am trying to render these components:

         render(){
            return (<div>
                <PlacesAutocomplete inputProps={autocompleteProps} />
                <GoogleMapsWrapper ...
            </div>);
         }

And my GoogleMapsWrapper:

```js
import React from 'react';
import { GoogleMap,withGoogleMap,withScriptjs } from 'react-google-maps';

// https://github.com/tomchentw/react-google-maps/issues/636#issuecomment-333732995

const GoogleMapsWrapper = withScriptjs(withGoogleMap(props => {
  return <GoogleMap {...props} ref={props.onMapMounted}>{props.children}</GoogleMap>
}));

export default GoogleMapsWrapper;

````

And the errors.

Uncaught Error: Google Maps JavaScript API library must be loaded. See: https://github.com/kenny-hibino/react-places-autocomplete#load-google-library

[JarLowrey]

Should I remove withScript & withGoogleMap and try to incorporate load-google-maps or react-async-script?

[tomchentw]

If PlacesAutocomplete requires google as global variable, it should be wrapped inside the component decorated by withScriptjs. You can think like this:
whenever this function props => { return <GoogleMap } is rendered, the _google_ global variable is ready

You can of course use any means you want to load google maps JS API. withScriptjs is just one of the way of doing it.

[JarLowrey]

So you're saying the autocomplete should go inside the GoogleMapsWrapper class? Then it would be a wrapper for both a GoogleMap and a PlacesAutocomplete. Doesn't seem very extensible if you want to use them separately at some point though.

Could you use withScriptjs outside of the GoogleMapsWrapper? Something like this? Any potential issue with double loading the Maps library?

export default class AutocompleteComponent extends React.Component {

    initAutocomplete(map){
        this.autocomplete = new google.maps.places.Autocomplete(this._input);
    }

    render() {
        const MyComponent = withScriptjs(
            (props) => {
                return (
                    <input ref={(c) => {this.initAutocomplete} }  />
                );
            }
        );

        return (
            <div>
                <MyComponent
                    googleMapURL="https://maps.googleapis.com/maps/api/js?key=____&libraries=geometry,drawing,places"
                    loadingElement={<div style={{ height: `100%` }} />}
                    ref={this.initAutocomplete}
                />
            </div>
        );
    }
}

[tomchentw]

You're using it in the wrong way, please read the source code and understand what's going on under the hood. There's nothing I can help for now