this code works just fine:
render() {
const {classes, driversStore} = this.props;
return (
<div className={classes.container}>
<GoogleMapReact
bootstrapURLKeys={{key: 'ANY_KEY'}}
defaultCenter={this.props.initialLocation}
defaultZoom={this.props.zoom}
>
{
driversStore.selectedDrivers.map(driver => {
return driver.orderSequence.map(order => {
return <Marker
lat={order.lat}
lng={order.lng}
index={order.index}
color={driver.colorCode}/>
})
})
}
</GoogleMapReact>
</div>
);
}
}
But when i try to make an additional component to tidy up, the result shows overlapping markers on the map. doesnt work as it should. it occurs when i implement this new component RenderMarker.js:
@inject('driversStore')
@observer
class RenderMarkers extends Component {
render(){
const {driversStore} = this.props;
return (
<div>
{driversStore.selectedDrivers.map(driver => {
return driver.orderSequence.map(order => {
return <Marker
lat={order.lat}
lng={order.lng}
index={order.index}
color={driver.colorCode}/>
})
})
}
</div>
)
}
}
And import this component as RenderMarkers in the first code written above:
render() {
const {classes} = this.props;
return (
<div className={classes.container}>
<GoogleMapReact
bootstrapURLKeys={{key: 'ANY_KEY'}}
defaultCenter={this.props.initialLocation}
defaultZoom={this.props.zoom}>
<RenderMarkers/>
</GoogleMapReact>
</div>
);
}
}
Gives me overlapping markers. any clues why? Could the CSS be the problem here?
MarkerStyle:
const WIDTH = '15px';
const HEIGHT = '15px';
const markerStyle = () => ({
general: {
position: 'absolute',
width: WIDTH,
height: HEIGHT,
top: -WIDTH / 2,
left: -HEIGHT / 2,
textAlign: 'center'
},
circle: {
borderRadius: '50%',
borderStyle: 'solid',
borderWidth: '1px',
fontWeight: 'bold',
color: '#FFF'
}