How to add marker on map by Click using react-google-maps?
10,599
Solution 1
This is a generic example that demonstrates how to display marker on map click:
const Map = compose(
withStateHandlers(() => ({
isMarkerShown: false,
markerPosition: null
}), {
onMapClick: ({ isMarkerShown }) => (e) => ({
markerPosition: e.latLng,
isMarkerShown:true
})
}),
withScriptjs,
withGoogleMap
)
(props =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
onClick={props.onMapClick}
>
{props.isMarkerShown && <Marker position={props.markerPosition} />}
</GoogleMap>
)
export default class MapContainer extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div style={{ height: '100%' }}>
<Map
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
)
}
}
Solution 2
Check this code with the edited version which add the marker
const InitialMap = withGoogleMap(props => {
var index = this.marker.index || [];
return(
<GoogleMap
ref={props.onMapLoad}
zoom={13}
center={{ lat: 21.178574, lng: 72.814149 }}
onClick={props.onMapClick}
>
{props.markers.map(marker => (
<Marker
{...marker}
onRightClick={() => props.onMarkerRightClick(marker)}
/>
))}
</GoogleMap>
)
});
export default class MapContainer extends Component{
constructor(props){
this.state = {
markers:[{
position:{
lat: 255.0112183,
lng:121.52067570000001,
}
}]
}
}
render(){
return(
<div style={{height:"100%"}}>
<InitialMap
containerElement={
<div style={{height:"150px"}}/>
}
mapElement={
<div style={{height:"150px"}} />
}
markers={this.state.markers} />
</div>
)
}
}
Related videos on Youtube
Author by
Van
Updated on June 04, 2022Comments
-
Van almost 2 years
I'm struggling to find a very simple example of how to add a marker(s) to a Google Map when a user left clicks on the map using React-google-maps in components based. Need help.
const Map = withScriptjs(withGoogleMap((props) => <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }} onClick = {props.onMapClick} > {props.isMarkerShown && <Marker position={props.markerPosition} />} </GoogleMap> )) export default class MapContainer extends React.Component { constructor (props) { super(props) this.state = { } } render () { return ( <div style={{height: '100%'}}> <Map googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places" loadingElement={<div style={{ height: `100%` }} />} containerElement={<div style={{ height: `400px` }} />} mapElement={<div style={{ height: `100%` }} />} placeMarker={this.placeMarker} /> </div> ) } }
-
Van about 6 yearsHi @Arthi, where is the function onMapClick
-
Ashok about 6 years@Van can you check this reference stackoverflow.com/questions/43937887/…
-
Mario Nezmah almost 3 years
e.latLng
of Marker is a function. If I want to access thelatLng.lat
itself, how can I do so. For example, If I want to render the Lat and lng on the screen, how can I do that? -
Mario Nezmah almost 3 yearsand to give myself an answer (and to all interested)
e.latLng.lat().toFixed(3)
does the trick