Marker with label from google map doen't have event target

Question

I'm trying to add onclick event to Marker my code looks like this:

        <MarkerWithLabel
          position={{ lat: val.coordinate.lat, lng: val.coordinate.lon }}
          key={val.thumbnailUrl}
          labelAnchor={new google.maps.Point(0, 0)}
          labelClass={styles.marker_label}
          onClick={(e)=>console.log( e )}
          >
          <div className={styles.preview}>
            <img src={val.thumbnailUrl} alt={val.name} />
            <p>{val.ratePlan.price.current}</p>
            <p><b>{`${val.address.countryName}, ${val.address.locality}, ${val.address.region}, ${val.address.streetAddress}`}</b></p>
            <p>Rating: {val.guestReviews.rating}</p>
          </div>
        </MarkerWithLabel>

my event doesn't have target.

i see this in cosole

 _.gp {latLng: _.I, domEvent: MouseEvent, pixel: _.N, Xa: undefined}

The `onClick` here is basically map to `marker.addListener("click")` so `e` is the argument google maps calls the callback with, so it's not related to the library. As you noticed, the event has `domEvent` with `currentTarget: null` but even `target` is not helpful because it's the `area` element while you probably looking for the pointer itself. What exactly are you looking for in the event (`e`)? — Mosh Feu, Feb 01 '21 at 15:27

score 0 · Answer 1 · answered Feb 02 '21 at 13:27

I fixed this problem using try catch. that is my code

<MarkerWithLabel
          position={{ lat: val.coordinate.lat, lng: val.coordinate.lon }}
          key={val.thumbnailUrl}
          labelAnchor={new google.maps.Point(0, 0)}
          // labelClass={val.id == GlobalStore.propertySelected ? styles.marker_label : styles.marker_label_selected}
          labelClass={ styles.marker_label}

          icon = {icon}
          title={val.id.toString()}
          onClick={(e)=>GlobalStore.setPropertySelected( e )}
          >
          <div className={styles.preview}>
            {val.ratePlan.price.current}
          </div>
        </MarkerWithLabel>


  setPropertySelected(e){
    try {

      if(e.currentTarget.title) {
  
       console.log(e.currentTarget)
  
      }

    } catch(error) {

      console.log(error);

    }
  }

now it works

if somebody can explain why this problem heppened with me, please do it — Yevhen Shashnin, Feb 02 '21 at 13:34

Marker with label from google map doen't have event target

1 Answers1