I was not able to get onClick event on Marker in google-maps-react library

331 views Asked by At

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);
0

There are 0 answers