I was tried to get the onClick event on the marker but I'm not able to get that. I was going through the document(google-maps-react) also I have created the static position and add marker but still, it's not getting it. can someone help me?
I want to get the onClick event working on marker. I have tried so much but I'm not able to find the solution. the document also mentions that properly named so I was given the exact name that they provided in the document.
NPM Package: https://www.npmjs.com/package/google-maps-react
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import React, { Component } from "react";
class WithMarkers extends Component {
state = {
activeMarker: {},
selectedPlace: {},
showingInfoWindow: false
};
onMarkerClick = (props, marker) =>
this.setState(
{
activeMarker: marker,
selectedPlace: props,
showingInfoWindow: true
},
() => {
console.log("Click on marker");
}
);
onInfoWindowClose = () =>
this.setState({
activeMarker: null,
showingInfoWindow: false
});
onMapClicked = () => {
if (this.state.showingInfoWindow)
this.setState({
activeMarker: null,
showingInfoWindow: false
});
};
render() {
if (!this.props.loaded) return <div>Loading...</div>;
return (
<Map
className="map"
google={this.props.google}
onClick={this.onMapClicked}
style={{ height: "100%", position: "relative", width: "100%" }}
zoom={14}
>
<Marker
name="SOMA"
onClick={this.onMarkerClick}
position={{ lat: 37.778519, lng: -122.40564 }}
/>
<Marker
name="Dolores park"
onClick={this.onMarkerClick}
position={{ lat: 37.759703, lng: -122.428093 }}
/>
<Marker name="Current location" onClick={this.onMarkerClick} />
<InfoWindow
marker={this.state.activeMarker}
onClose={this.onInfoWindowClose}
visible={this.state.showingInfoWindow}
>
<div>
<h1>{this.state.selectedPlace.name}</h1>
</div>
</InfoWindow>
<InfoWindow position={{ lat: 37.765703, lng: -122.42564 }} visible>
<small>
Click on any of the markers to display an additional info.
</small>
</InfoWindow>
</Map>
);
}
}
// export default WithMarkers;
export default GoogleApiWrapper({
apiKey: "KEY"
})(WithMarkers);