Displaying a list of Markers with React - node.js

Question

im trying to display a list of Markers with lat and lng stored on my mongodb database.
Im using the google-maps-react and this is my child map component
import {
Map,
InfoWindow,
Marker,
GoogleApiWrapper,
Polygon
} from 'google-maps-react';
import React, { Component } from 'react';
export class MapContainer extends Component {
render() {
const coords = this.props.initialCenter;
const position = this.props.position;
const paths = this.props.paths;
const style = this.props.style;
const center = this.props.center;
console.log(this.props);
return (
<Map
google={this.props.google}
zoom={18}
initialCenter={coords}
style={style}
center={center}
>
<Marker
onClick={this.onMarkerClick}
name={'Current location'}
position={position}
/>
<InfoWindow onClose={this.onInfoWindowClose}>
<div>
<h1>Test</h1>
</div>
</InfoWindow>
<Polygon
paths={paths}
strokeColor='#0000FF'
strokeOpacity={0.8}
strokeWeight={2}
fillColor='#0000FF'
fillOpacity={0.35}
/>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_TEST
})(MapContainer);
I get the coordinates from my endpoint here
const centers = this.props.places.places.map(place => {
return {
lat: place.center[0],
lng: place.center[1]
};
});
And im trying to display the list like this:
const position = { ...centers} ->does nothing
//const position = { lat: 41.53113384600326, lng: -8.619018495082855 }; -> prints one Marker
//const position = centers[0] -> prints one Marker
Im using that child component like this:
<MapContainer
initialCenter={initialCenter}
position={position}
paths={paths}
style={style}
center={center}
/>
Any help on this ?
EDIT:
Changed child component to
<Marker
onClick={this.onMarkerClick}
name={'Current location'}
position={{ position }}
/>
And on parent:
Where centers is:
<MapContainer
initialCenter={initialCenter}
paths={paths}
style={style}
center={center}
position={centers.map(p => (
<Marker
onClick={() => this.onMarkerClick(p)}
name={'Current location'} // You should probably have a "name" field for each positions
position={p}
/>
))}
></MapContainer>
const centers = this.props.places.places.map(place => {
return {
lat: place.center[0],
lng: place.center[1]
};
});
Still not showing

Answer 1

You need to send the array of position as props to your component, and then render them all like this:
this.props.positions.map(p => <Marker
onClick={() => this.onMarkerClick(p)}
name={'Current location'} // You should probably have a "name" field for each positions
position={p}
/>)