Map not rendered after getting Places from the Places API

[sellomkantjwa]

I am trying to integrate react-google-maps with the vanilla google places API. I have a handler for the bounds_changed event that fires correctly.

onBoundsChanged() {
            let mapBounds = this._map.getBounds();
            console.log(this._map);
            let service = new places.PlacesService(this._map.getDiv());
            console.log(this._map.getDiv());
            service.nearbySearch({bounds: mapBounds, type: "night_club"}, function (results, status) {
                console.log(results);
                console.log(status);
                this.setState({nearBy: results});
            }.bind(this));
        }

this._map, results and status are all correctly printed to the screen and this._map.getDiv() correctly prints the target Div. I get no errors, however the map is not rendered.
If I leave out the instantiation of the places service i.e

let service = new places.PlacesService(this._map.getDiv());

and the call to nearbySearch() then the map is rendered without any issues.
I'm not sure what I'm missing. My knowledge of react is also quite limited so the problem is might be due to that. Apologies if that is the case.

[BrunoBerisso]

Hope you found a solution for this. In case I don't and for the future this is my current approach to this topic.

I have the same issue, what (seems) to work for me is remove the map and add it again each time I want to load new marks.

Something like:

componentDidMount: function() {
   this.setState({
      loading: true
   })

   api.getPlaces().then(function(newPlaces) {
      this.setState({
         loading: false,
         places: newPlaces
      }.bind(this))
   })
},

getInitialState: function() {
   loading: true,
   places: []
},

render: function() {
   if (this.state.loading)
      return <p>LOADING</p>
   else 
      return <Map marks={this.state.places}/>
}

The idea is delete the Map component each time you get new places.

Note: I'm using the v5.0.1 because I can't use React 15 at this point. Maybe that's another issue.

[payaaam]

Any update on this? I am getting the same issue.

[tomchentw]

Please refer to Getting Help section in the README (or #469).