I have the below JS code Why are only two markers displaying when clicking on the map, although the expectation is multiple markers should be displayed? ![map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8f0t31ougnpecffozj9.png) The marker is inside the tags too `}` is not creating a new instance for the marker after the 2nd marker is created for some reason... ``` import React from 'react'; import { compose, withStateHandlers } from "recompose"; import { InfoWindow, withGoogleMap, withScriptjs, GoogleMap, Marker } from 'react-google-maps'; const Map = compose( withStateHandlers(() => ({ isMarkerShown: false, markerPosition: null }), { onMapClick: ({ isMarkerShown }) => (e) => ({ markerPosition: e.latLng, isMarkerShown:true }) }), withScriptjs, withGoogleMap ) (props => {props.isMarkerShown && } ) export default class MapContainer extends React.Component { constructor(props) { super(props) } render() { return (

} containerElement={

} mapElement={

} /> {clicks.map((latLng, i) => ( ))}

) } } ``` https://developers.google.com/maps/documentation/javascript/react-map

weyardwiz

Why are the marker positions not behaving correctly on map?

Join Our Newsletter. No Spam, Only the good stuff.