Google-maps-react: Custom map styles?

[kevinSuttle]

Does this component support the official map customization styles?
https://developers.google.com/maps/documentation/javascript/styling
https://developers.google.com/maps/documentation/javascript/examples/style-array

[kevinSuttle]

This prop? https://github.com/fullstackreact/google-maps-react/blob/master/src/index.js#L250

[kevinSuttle]

Yep!

[bobby-hewitt]

The required proptype here is an object. How does it work with the google maps style array?

[bobby-hewitt]

Aha.. Realised the readme has changed... It's the styles prop (obviously!)

[Reetalibrarian]

sorry, I don't understand. I'm new to React. how can I add style by using props?

[Reetalibrarian]

ok, I got it. I was wrong since I input a wrong format, which should be something like:

<Map google = {this.props.google} zoom = {14} styles = {[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"color":"#000000"},{"lightness":13}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#144b53"},{"lightness":14},{"weight":1.4}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#08304b"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#0c4152"},{"lightness":5}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#0b434f"},{"lightness":25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#0b3d51"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"}]},{"featureType":"transit","elementType":"all","stylers":[{"color":"#146474"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#021019"}]}]
}>  </Map>

[LinusGeffarth]

<GoogleMapReact
  options={{
    styles: this.mapStyles()
  }}
/>

where this.mapStyles() is:

mapStyles = () => {
  return [
    { elementType: "geometry", stylers: [{ color: "#1d2c4d" }] },
    { elementType: "labels.icon", stylers: [{ color: "#023e58" }] },
    ...
  ];
}