Search code examples
javascriptreactjsgoogle-mapsreact-google-maps

Change pin color in tomchentw react-google-maps?


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;
    }

Solution

  • @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 !