Google-maps-react not working along with react-places-autocomplete

[Prajeeshmobomo]

I am using google-maps-react in my project. The code to display map is as follows.

render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={{ width: '100%', height: '100%', position: 'relative' }}>

        {this.props.position &&
          <Marker
            onClick={this.onMarkerClick}
            title={this.props.position.info}
            name={this.props.position.address}
            position={this.props.position.position} />}

        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onInfoWindowClose}>
          <div>
            <h1>{this.state.selectedPlace.name}</h1>
          </div>
        </InfoWindow>
      </Map>
    );
  }

The credentials are defined as follows.

export default GoogleApiWrapper({
  apiKey: constants.ApiKey,
})(MapView);

Now i need to show the places autocomplete box inside the map.

I have used the following package https://github.com/hibiken/react-places-autocomplete#load-google-library

The current issue is that the google maps and the places search box does not work together.

When i add the places component, i am getting the following error.

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

To fix the issue, if i define the MAPS ON THE INDEX PAGE, then i get the following error and the map does not load.

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

Uncaught TypeError: Cannot read property 'prototype' of undefined

So basically there are two things that needs to work

1. Map Component

2. Places box which is inside maps.

Any idea on how to fix this?

[geraldoramos]

same here...

[jmayergit]

https://github.com/tomchentw/react-google-maps/issues/812#issuecomment-433315859

I followed this comment to have these two libraries work with each other.

[skiff451]

import React, {FC, useEffect, useRef} from 'react'; import {Input} from "@/components/ui";

type Props = {}

export const Autocomplete: FC<Props> = ({}) => { const autocomplete = useRef<HTMLInputElement>(null)

useEffect(() => {
    (async () => {
        await window.google.maps.importLibrary('places')
        if (autocomplete.current) {
            const a =
                new window.google.maps.places.Autocomplete(
                    autocomplete.current, {
                        types: ['(regions)'],
                        componentRestrictions: {country: 'ua'}
                    })
        }
    })()

}, [autocomplete.current]);

return (
    <div>
        <Input
            //@ts-ignore
            inputRef={autocomplete}
            placeholder={"search place"}
        />
    </div>
);

};

it works for me