Custom map styles, custom markers and marker pin color not working on Android

[prathammehta]

Is this a bug report?

Yes

Have you read the Installation Instructions?

Yes

Environment

react-native: 0.51.0
react: 16.0.0

Steps to Reproduce

1. Create a react native app using react-native init.
2. Follow installation instructions to the dot.
3. Use Google custom style generator to generate a custom style.
4. Add custom style prop to Map component

Expected Behavior

1. Custom map style would show up on Android and iOS

Actual Behavior

• Custom style works on iOS
• Custom style does not work on Android.

[willbattel]

Can you please share what react-native-maps version and play-services-maps version you're using? The latest versions are 0.20.1 and 11.8.0 respectively.

[prathammehta]

Hey,
Sorry for the delayed response.

react-native-maps version is 0.20.1
Google play services are set to 11.8.0

Still doesn't work.

[willbattel]

Okay. Can you share the code for you MapView component?

Also, a new version of react-native-maps was just recently published. Try updating to v0.21.0. (Note that this will require Gradle version 3.0.0 or greater. See here.)

[prathammehta]

This is the code for the MapView component:

<MapView style={{position:'absolute', height:'100%', width:'100%'}} initialRegion={{ latitude: currentLocation.coords.latitude, longitude: currentLocation.coords.longitude, latitudeDelta: intitialMapDelta, longitudeDelta: intitialMapDelta, }} showsUserLocation={true} mapPadding={mapPadding} ref={c => this.mapView = c} customMapStyle={Static.MapStyle} provider={Platform.OS == 'ios'?PROVIDER_GOOGLE:null} >

Also just realised the following aren't working on Android either:

• Custom marker images
• Marker pin color

[prathammehta]

I've also updated to v0.21.0 and Gradle 3.0.1
Experiencing the same problems.

[willbattel]

How come your provider prop has that ternary? You're setting the provider to null on Android, which may or may not be causing the problem.

Replace provider={Platform.OS == 'ios'?PROVIDER_GOOGLE:null} with provider={"google"} and see if it helps.

[prathammehta]

Hey,

Sorry for the delayed response. Been trying to fix this issue for over a month now. Still nothing. @wbattel4607 I tried what you've suggested. Not working. :/

[willbattel]

Can you share your MapView component code again, this time with my suggested code included?

[prathammehta]

Yup. Here it is:

<MapView style={{ position: 'absolute', height: '100%', width: '100%' }} initialRegion={{ latitude: currentLocation.coords.latitude, longitude: currentLocation.coords.longitude, latitudeDelta: intitialMapDelta, longitudeDelta: intitialMapDelta, }} maxZoomLevel={14.5} showsUserLocation={true} mapPadding={mapPadding} ref={c => this.mapView = c} customMapStyle={constants.MapStyle} provider={PROVIDER_GOOGLE} > { //Polyline to destination (this.state.polylinePlotted && this.state.destination) && <MapViewDirections origin={currentLocation.coords} destination={this.state.destination.coords} apikey={constants.googleAPIKey} strokeWidth={3} strokeColor="black" onReady={this.fitMapToCoordsAndFetchPickupoints} /> } { // Markers for pickup points // NEEDS TO BE ENABLED PROPERLY FOR PRODUCTION. this.state.pickupPoints && this.state.pickupPoints.map((pickupPoint) => { // if (pickupPoint.id != this.state.focusedPickupPoint.id) { return ( <Marker coordinate={{latitude: pickupPoint.latitude, longitude: pickupPoint.longitude}} image={pickupPoint.id === this.state.focusedPickupPoint.id?redCircle:greyCircle} tracksViewChanges={false} /> ) }) } </MapView>

[willbattel]

Hmm. Nothing obvious is wrong. Are there any warnings in the debug log?

What version(s) of Android have you tried? Try different API levels on the emulator and see if there is any change in behavior.

[gkemp94]

Also having this issue, will post my code later this week.

[prathammehta]

@gkemp94 could you post your code please.

[prathammehta]

@wbattel4607 Have tried many different versions of android and different API levels. Same issue everywhere. It's really hard to figure this out as somethings work on the map and others do not.

[willbattel]

@prathammehta try changing your provider from PROVIDER_GOOGLE to "google"

[rborn]

Closing, old issue

[patrickmuhi]

Thanks guys

[GabrielScalici]

Allowed colors for Marker are : red, tomato, orange, yellow, green, gold, wheat, linen, tan, blue, aqua, teal, violet, purple, indigo, turquoise, navy and plum.
Like:
<MapView.Marker
pinColor={'green'}
...