Change pin color in tomchentw react-google-maps?

Question

I want to keep the default icon and just change it's color on click. What property should I use to change color?

this is my makeMarkers function:

 makeMarkers=()=>{
     const marker=this.props.markers.map((marker,id)=>{
      return <Marker marker={marker} position={{lat:marker.lat, lng:marker.lng}} 
                      onClick={()=>this.props.onMarkerClick(marker)}
              >

                {marker.showWindow && (
                <InfoWindow>
                  <div>Something is there!</div>
                  </InfoWindow>)
                }      
              </Marker>
    })
        return marker;
    }

score 2 · Accepted Answer · answered Jun 05 '18 at 17:44

@Aonan Li

Yes, that is what I did eventualy, I used custom image(which is basicly a pin with different color). Thanks for the link, it has some very usefull informations !

This is how my code looks now:

>  makeMarkers=()=>{
>     
>     const marker=this.props.markers.map((marker,id)=>{
>       return <Marker key={id} marker={marker} position={{lat:marker.lat, lng:marker.lng}} 
>                       onClick={()=>this.props.onMarkerClick(marker)}
>                       options={{icon:`${marker.icon}`}}
>               >
>                 
>                 {marker.showWindow && (
>                 <InfoWindow>
>                   <div>Something is there!</div>
>                   </InfoWindow>)
>                 }      
>               </Marker>
>     })
>         return marker;
>     }

Every marker gets initial custom .png, and onClick I toggle from custom to default one !

score 1 · Answer 2 · answered Jun 05 '18 at 16:17

This may not be exactly what you need, but have a look at this link first.

Google Map icons with VisualRefresh

I didn't find a property which could let you change the color of the default icon. However, you could always provide a customized image by yourself.

Hope that can help.

Change pin color in tomchentw react-google-maps?

2 Answers2