how to set a marker in the GooglePlacesAutocomplete in react native

Question

I need help to solve this problem.

The problem is in the part that we search the address in the google place picker and then it automatically sets a marker/pin in the chosen location, but the marker set does not work yet...

The screen is: Diurno.js below is the entire code.

Here below is the search code:

      <GooglePlacesAutocomplete
    placeholder="Outro Local?"
    placeholderTextColor="#333"
    returnKeyType={'search'} // Can be left out for default return key 
    //onPress={onLocationSelected}
    onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                this.props.notifyChange(details.geometry.location);
            }
            }
    query={{
      key: "",
      language: "pt"
    }}
        nearbyPlacesAPI='GooglePlacesSearch'
        debounce={300}
    textInputProps={{
      onFocus: () => {
        this.setState({ searchFocused: true });
      },
      onBlur: () => {
        this.setState({ searchFocused: false });
      },
      autoCapitalize: "none",
      autoCorrect: false
    }}
    listViewDisplayed={searchFocused}
    fetchDetails ={true}
    enablePoweredByContainer={false}

Other code here:

        <MapView 
      //onPress={this.handleMapPress}
      onPress={this.handleMapPress}  
      style={StyleSheet.absoluteFill}
      ref={map => this.mapView = map}
      rotateEnabled={true}
      scrollEnabled={true}
      showsMyLocationButton={true}
      showsUserLocation={true}
      zoomEnabled={true}
      showsPointsOfInterest={true}
      showBuildings={false} 
      //initialRegion={initialRegion}
      //region={region}
      initialRegion={region}
      provider="google"> 
      {!!props &&
       (<MapView.Marker
                coordinate={props.region}
               >         
        </MapView.Marker>
        )} 

      {!!location &&
       (<MapView.Marker
                coordinate={location}
               onPress={this.handleMarkerPress} 
               >    
        <Image source={isAddressVisible? placholder2: placholder} style={styles.icon} />         
        </MapView.Marker>
        )} 
    {this.state.coordinates.map((coordinates, index, title, description, location) =>(
      <MapView.Marker 
      onPress={this.handleMapPress} 
      ref={mark => coordinates.mark = mark}
      key={`coordinate_${index}`} 
      title={coordinates.title}
      description={coordinates.description} 
      coordinate={{
            latitude: coordinates.latitude,
            longitude: coordinates.longitude,
            }}
      >
      <Image source={isAddressVisible? placholder2: placholder} style={styles.icon} /> 
    </MapView.Marker>
    ))}
  </MapView> 

Answer 1

I can see several issues in your code. First, you're getting this error:

_this.notifyChange is not a function.

You need to use props here:

onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
    this.props.notifyChange(details.geometry.location);
  }
}

Then, notice that you have commented out the region attribute from your MapView and that there is no onRegionChange either. If you add these:

region={this.props.region}
onRegionChange={(region) => this.props.onRegionChange(region)}

Your map now centers to the chosen place from Autocomplete predictions. But there is no marker, because you should also set its coordinate accordingly:

<MapView.Marker coordinate={this.props.region} />

I ran your app and after the above changes, your marker gets placed at the selected Autocomplete location. See screenshot below. :)