Google 在 React 组件中放置了自动完成功能

Question

I am trying to build a google map component and everything is working fine with the Google Maps API v3 but not the Autocomplete functionality.

This is the code I am using:

The Google Map component

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

const Marker = React.createClass({
    componentDidMount: function() {
        console.log("Marker on mount");
    },
    render: function() {
        return false;
    }
});

export default Marker;

const GoogleMap = React.createClass({
    componentDidMount: function() {
        var mapOptions = {
            center: this.createLatLng(this.props.center),
            zoom: this.props.zoom || 14
        };

        var map = new google.maps.Map(ReactDOM.findDOMNode(this), mapOptions);

        //Render all the markers (children of this component)
        React.Children.map(this.props.children, (child) => {
                var markerOptions = {
                position: this.createLatLng(child.props.position),
                title: child.props.title || "",
                animation: google.maps.Animation.DROP,
                icon: child.props.icon || null,
                map: map,
                autocomplete:new google.maps.places.AutocompleteService()
            };

            var marker = new google.maps.Marker(markerOptions);

            if(child.props.info) {
                var infowindow = new google.maps.InfoWindow({
                    content: child.props.info
                });

                marker.addListener('click', function() {
                    infowindow.open(map, marker);
                });
            }
        });

        var input = this.refs.search;
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);

        this.setState({map});
    },
    createLatLng: function(element) {
        return new google.maps.LatLng(element.lat, element.lng);
    },
    render: function() {
        return (
            <div className="map">
                <input ref="search"/>
            </div>
        )
    }
});

export default GoogleMap;

And this is where I call the component

import React, {Component} from 'react';
import GoogleMap from './GoogleMap';
import Marker from './GoogleMap';
import Geosuggest from 'react-geosuggest';

class DoodlesMap extends Component {
    state = {
        center: null,
        marker: null,
        directions: null
    };

    componentWillMount() {
        navigator.geolocation.getCurrentPosition((position) => {
            this.setState({
                center: {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                },
                marker: {
                    position: {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    }
                }
            });


        });
    }

    renderYouAreHereMarker() {
        return (
            <Marker
                position={this.state.center}
                icon="../../img/you-are-here.png"
            />
        )
    }

    render() {
        if (!this.state.center) {
            return (
                <div>Loading...</div>
            )
        }

        return (
            <div>
                <GoogleMap
                    center={this.state.center}
                    zoom={15}
                >
                    {this.renderYouAreHereMarker()}
                    <Marker
                        position={{lat: 41.317334, lng: -72.922989}}
                        icon="../../img/marker.png"
                        info="Hola"
                    />
                    <Marker
                        position={{lat: 41.309848, lng: -72.938234}}
                        icon="../../img/marker.png"
                        info="Epi"
                    />
                </GoogleMap>
            </div>
        );
    }
}

export default DoodlesMap;

I do not receive any console error. The map is displayed correctly (with the markers as children) the input also, but does not make the autocomplete.

Thank you in advance!!

Answer 1

I figure it out, and was very simple issue.

The thing was that I did not "enable" the places API in my google developer console.

Once I did this everything worked fine!!

Answer 2

It took me quite some time to get the google-places-autocomplete feature working nicely with a React Component. I did however manage to figure it out and wrote a short tutorial on it over here.

Medium Tutorial Post!

TL;DR of tutorial: You have to use a library called react-scripts to render the google-maps-places library after the component has mounted. Most of the time the reason that the autocomplete doesn't work is because the library did not load properly.