How to mark clicked pin on react google map?

Question

I have custom markers added to react google map. What I am trying to do is to add custom marker on one that user clicks. I tried to use state, set it to false and then change to true when is clicked but no luck.

Here is the marker part of Map

import Pin from "../img/pin.svg";
import activePin from "../img/activePin.svg";

    {marker.map(marker => (
        <Marker key={marker.id}
                position={{
                lat: marker.lat,
                lng: marker.lng
                }}
                icon={{
                        url: this.props.showActive ? Pin : activePin
                      }}
                onClick={e => {
                     this.activatePin(marker);
                }}
        />
))}

Assume that Pin and activePin are variables with paths to image. Markers, their lat and lng I am getting from API.

Currently click not change icons, it just stay as regular icon. Should I use withStateHandlers or is there another way?

It would be easier if you could also post where you get marker variable and where activatePin is defined — Doğancan Arabacı, Jul 22 '19 at 13:57
I just edited question. I am geting positions from api, and images should be loaded from local folder. — youngster, Jul 22 '19 at 14:02

score 0 · Answer 1 · answered Jul 23 '19 at 13:29

Try do a control before that set the marker's icon, like this:

var icon = {}
var condition = this.state.condition // This change by this.activatePin(marker)
if (condition ) {
    icon = {
        //Set here your icon in base the condition
        url: this.props.showActive //.. ... ...
      }
} else {
    //Set here your icon in base the condition
    icon ={
        url: this.props.showActive //.. ... ...
      }
}
marker.map(marker => (
    <Marker key={marker.id}
        position={{
            lat: marker.lat,
            lng: marker.lng
        }}
        icon={icon}
        onClick={e => {
            this.activatePin(marker);
        }}
    />
))

How to mark clicked pin on react google map?

1 Answers1