Change pinColor of MapView.Marker to Black

[nyxynyx]

The color of MapView.Marker does not seem to change from the default red color even after assigning a color to pinColor.

Is something wrong?

{ this.state.markers.map(marker => {
	return (
		<MapView.Marker 
			coordinate={{latitude: marker.latitude, longitude: marker.longitude}}
			key={marker.key}
			pinColor='#000000'
		/>
	)
})}

Screen cap from Android Emulator

[krsjoseph]

Hey @nyxynyx try adding the pinColor value in curly braces like this.

{ this.state.markers.map(marker => { return ( <MapView.Marker coordinate={{latitude: marker.latitude, longitude: marker.longitude}} key={marker.key} pinColor={'#000000'} /> ) })}

[daose]

Observing the same problem, iOS works but android still renders the default red pin (also tried @krsjoseph solution, same result)

[alexprice1]

bump

[bufke]

Google maps markers only show in certain colors. You can't just use any color. I wish a had a canonical source to back this up, but try experimenting with shades of a color. You can't change the shade but at a certain hex value it will just appear as a different color.

[fduvnjak]

I had the issues (only on Android) that the pin color change did not work. I assume the map is reusing the pin based on the key.

Changing the marker key property to something different worked for me

key={this.updatePinKeyForMarker(marker)}

[douglasjunior]

Same problema here. I'm trying to set the color #474744. But the pin turns yellow.

Correct color:

Google Pin Color:

Versions:

"react-native": "0.46.4"
"react-native-maps": "0.15.3"

compile "com.google.android.gms:play-services-base:10.2.4"
compile "com.google.android.gms:play-services-maps:10.2.4"

[jorgutdev]

Same issue here, @bufke is right.
Anyone have a list of available colors?

[0xpatrickdev]

Going to bump this as well. Almost every hex color I've tried is defaulting to the red marker, and the customMapStyle prop doesn't seem to be working either.

Versions:

"expo": "^19.0.0",
"react-native": "^0.46.1"`
"react-native-maps": "^0.15.3"

@jorgutdev I was unable to find a list of available colors, but here are some I found from testing (per @bufke's suggestion):

• red (default)
• tomato
• orange
• yellow
• gold
• wheat
• tan
• linen
• green
• blue / navy
• aqua / teal / turquoise
• violet / purple / plum
• indigo

Not the best set of colors IMO, and it doesn't seem to offer anything on a grayscale (which is what I need for my app).

@duvnjak99, would you mind elaborating on your updatePinKeyForMarker function? Does it allow you to pass custom styles to your pins? Or is it just used to update the pin color?

[raduflp]

@pcooney10 thanks for the research, not a great set of colors indeed.
I think a simple mention of this limitation in the docs would help a great deal

[0xpatrickdev]

Yes, agreed @raduflp. Best bet IMO is just to use custom images.

[octopuss]

From my research, I've find out that only colors that are created from combination HUE + 100% saturation and 100 % value/lightness can be used see docs page (
https://developers.google.com/android/reference/com/google/android/gms/maps/model/BitmapDescriptorFactory)
for example HUE_GREEN is 120 (100, 100 - see convertor https://www.rapidtables.com/convert/color/hsv-to-rgb.html) , which converts to #00FF00 and can be used as marker color.

[bendman]

@fduvnjak I am having the same issues you mention about the key playing a role in allowing/preventing rendering with a new color.

I'm simply switching between red and yellow values (both accepted on Android) for the pinColor when a user presses on the marker, but the color wasn't changing unless I generated a new key prop.

I ended up using something like

<Marker
  pinColor={isActive ? 'yellow' : 'red'}
  key={`${markerId}-${isActive ? 'active' : 'inactive'}`}
  // ... other props ...
/>

It seems that there are two issues at hand here: Android only allows very specific colors for markers, and marker colors don't update on Android unless the key prop changes.

[rborn]

Closing as per #2429

[rraina91]

I had the issues (only on Android) that the pin color change did not work. I assume the map is reusing the pin based on the key.

Changing the marker key property to something different worked for me

key={this.updatePinKeyForMarker(marker)}

Thank you @fduvnjak !

This was precisely my problem, too.

I "foolishly" tried to use a stable, natural key (i.e. strictly domain-object derived) and every time my redux store was modified with prop values changing the pinColor, the color wouldn't actually update. By adding something that's different every time (i.e. getMilliseconds()) to the key, I was able to get the reacted updates as I expected from marker changes.

That will teach me to build keys with meaning.. right?? Hah.

[SonuGitCfcs]

@fduvnjak I am having the same issues you mention about the key playing a role in allowing/preventing rendering with a new color.

I'm simply switching between red and yellow values (both accepted on Android) for the pinColor when a user presses on the marker, but the color wasn't changing unless I generated a new key prop.

I ended up using something like

<Marker
  pinColor={isActive ? 'yellow' : 'red'}
  key={`${markerId}-${isActive ? 'active' : 'inactive'}`}
  // ... other props ...
/>

It seems that there are two issues at hand here: Android only allows very specific colors for markers, and marker colors don't update on Android unless the key prop changes.

Thank you ! Its work for me