Google-maps-react: Change Marker color onMouseover and when active

[BrandenDaniel]

Is there a way I can do this? I'm looking at the google props in the markers but I can't seem to find much about changing the marker's styles / colors (I want to do this when hovering and when clicked/active). Also, I'm looking to change the marker's image if that's possible, I'd appreciate any help! Cheers

[jeffchiucp]

I am doing the similar thing, and trying to do customize markers.

[sealrockswell]

@BrandenDaniel I'm also trying to add images instead of pins. Please let me know if you arrive at a solution.

[anil-sidhu]

render() {
        var icon = {
            url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png", // url
            scaledSize: new this.props.google.maps.Size(90, 42), // scaled size
        };
        return (
            <div>
                <button onClick={() => { this.getCurrent() }}>Get Current Location</button>
                <Map google={this.props.google}
                    initialCenter={{
                        lat: 28.4595,
                        lng: 77.0266,
                    }}
                    zoom={13}
                    onClick={this.onMapClicked}>
                    {
                        this.state.currentLocation ?
                            <Marker onClick={this.onMarkerClick}
                                name={'Current location'}
                                icon={icon}
                                position={this.state.currentLocation} />
                            : null
                    }

<InfoWindow
                        marker={this.state.activeMarker}
                        visible={this.state.showingInfoWindow}>
                        <div>
                            <h1>{this.state.selectedPlace.name}</h1>
                        </div>
                    </InfoWindow>
                </Map>
            </div>
        )
    }

you can use image like this. for color change

[Jlevett]

im getting a flickering of all markers (not the map) when one marker changes color.

 render(){

    var defaultIcon = {
        url: 'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|0091ff|40|_|%E2%80%A2', // url
        scaledSize: new this.props.google.maps.Size(20, 30), // scaled size
    };
     var highlightedIcon = {
        url:  'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|FFFF24|40|_|%E2%80%A2', // url
        scaledSize: new this.props.google.maps.Size(20, 30), // scaled size
    };

    return (
      <Map
        google={this.props.google}
        bounds={this.state.bounds}
        styles={mapStyle}
        onClick={this.onMapClicked}
      >
        {this.props.allStoredMarkers.map((storedMarker, index)=>
              <Marker
                  position={{lat:storedMarker.location.lat ,lng:storedMarker.location.lng}}
                  name={'Name Holder'}
                  key={index}
                  title={storedMarker.title}
                  onClick={this.onMarkerClick}
                  onMouseout={this.mouseMoveOutOfMarker}
                  onMouseover={this.onMouseoverMarker}
                  animation={this.state.hasDropped ? this.state.animation : this.props.google.maps.Animation.DROP }
                  icon={
                    this.state.mouseOnTitle!==storedMarker.title
                    ? defaultIcon : highlightedIcon
                  }
               />
        )}
.....
......

[Qwiso]

this library makes me so angry sometimes. it does all the basics but makes it impossible to customize

how do refresh markers after editing their icon data?

i must re-draw the markers for the new icon fillColor to apply but it seems impossible to do. i have been on the verge of scrapping this and going vanilla JS because there is no apparent way to access the current google.maps.Map object that you originally create. i could update my icons if i could re-apply them to the current map

[themakerman]

Why is this rerendering on markers still there? If markers are same why rerendering? Its happening with infowindow as well. When i click on info window all the markers rerender

[nischayv]

I'm facing a similar issue as well. When one of the markers changes position, all the custom markers re-render (flicker). This does not seem to happen if the markers were the default ones, only when using custom markers. Any thoughts on what might be happening?

[bulhakj]

Did anyone solve the problem with flickering custom markers?

[FredrikAugust]

@bulhakj, I believe this library will simply naïvely update every time it sees that the props have been updated, so without changing the marker/map source code (in this library that is - not the google API), I don't think it's possible.