Google-map-react - Javascript: How To Click On A Customized Marker

I have a google-map with customized markers. Those markers are logos of companies. After inquiring the APIs I am able to obtain a json file with the vessels I am interested in and

Solution 1:

To make a custom marker clickable, Ship component could be extended like this:

constShip = ({ ship }) => {
    const shipName = ship.NAME;
    const company = shipCompanyMap[shipName];

    functionhandleMarkerClick(){
       console.log('marker clicked');
    }

    const shipImage = companyImageMap[company];
    return (
        <divonClick={handleMarkerClick}>
            {/* Render shipImage image */}
            <imgsrc={shipImage}alt="Logo" /></div>
    );
};

Here is an example which demonstrates how to make marker clickable for google-map-react library:

importReact, { Component } from"react";
importGoogleMapReactfrom"google-map-react";
import icon from"./orange-blank.png";

const googleAPIKey = "";

const markerStyle = {
  position: "absolute"
};

functionCustomMarker({lat,lng,onMarkerClick}) {
  return (
    <divonClick={onMarkerClick}lat={lat}lng={lng}><imgstyle={markerStyle}src={icon}alt="icon" /></div>
  );
}

functionMapExample({ center, zoom, data }) {

  functionhandleMarkerClick(){
    console.log('Click')
  }


  return (
    <GoogleMapReactstyle={{height: "100vh", width: "100%" }}
      defaultZoom={zoom}defaultCenter={center}
    >
      {data.map((item, idx) => {
        return <CustomMarkeronMarkerClick={handleMarkerClick}key={idx}lat={item.lat}lng={item.lng} />
      })}
    </GoogleMapReact>
  );
}

Solution 2:

Try this code :

import { Map, GoogleApiWrapper, Marker } from"google-maps-react";

handleMarkerClick = (props, marker, e) => {
    // do whatever you want
};

<MarkeronClick={this.handleMarkerClick}
></Marker>

With rest of your configuration as you require.