Google places autocomplete inside a react component - google-maps

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.