0

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'
}
Sarkis
  • 93
  • 2
  • 9
  • Can you add your style file to the question – uneet7 Feb 20 '19 at 09:34
  • Maybe this is related to my question as well https://stackoverflow.com/questions/51785991/react-google-maps-markerwithlabel-labels-overlap – Sabbin Feb 20 '19 at 10:03
  • @Sabbin yea its fairly similar did you do anything? – Sarkis Feb 20 '19 at 10:28
  • unfortunately no, that was a test project so I did not give further interest in it... the only way that I think is possible is if you calculate the distance between points and apply the map scale and put some offset to the markers – Sabbin Feb 20 '19 at 10:40

0 Answers0