Can't implement Styling Wizard

[fdurmaz]

Hello,

I'm using the Custom Styling Wizard to get the silver style map. However, when I try to implement the JSON file to my project, it doesn't work.

This is my file:

// Packages
import React, {Component} from 'react';
import GoogleMapReact from 'google-map-react';

export default class Map extends Component {
    static defaultProps = {
        center: {lat: 51.909490, lng: 6.384903},
        zoom: 8,
        styles: require('../../constants/mapStyles')
    }

    render() {
        return (
            <div className='google-map' style={{height: '100vh', width: '100%'}}>
                <GoogleMapReact
                    bootstrapURLKeys={{key: 'AIzaSyClAqaUdtOKdG6zyT8wSNkuBhm1iOcfaVw'}}
                    defaultCenter={this.props.center}
                    defaultZoom={this.props.zoom}
                    defaultOptions={this.props.styles}>
                </GoogleMapReact>
            </div>
        )
    }
}

[johanlef]

DId you try: defaultOptions={{ styles: this.props.styles }}?

options accepts an object, you are probably passing the mapStyles array directly, without key.

[fdurmaz]

@johanlef I've tried. Nothing works..

[hansott]

mapStyles.js:

export default [
  {
    elementType: "geometry",
    stylers: [
      {
        color: "#f5f5f5",
      },
    ],
  },
  // ...
];

import styles from "./mapStyles";

<GoogleMapReact
  bootstrapURLKeys={{ key: GOOGLE_MAPS_API_KEY }}
  options={{ styles }}
>
  {/* your markers */}
</GoogleMapReact>

or options={{ styles: styles }}

works perfectly :)